How to manage state in AngularJS when using UI-Router with nested views?
I'm learning this framework and I'm trying to configure I am building an AngularJS application using UI-Router (version 1.0.0), and I'm working with issues with managing state across nested views. I have a parent state that loads a child view, but I need to maintain some state in the parent when navigating between different child views. For instance, I have the following configuration: ```javascript .state('parent', { url: '/parent', templateUrl: 'parent.html', controller: 'ParentCtrl' }) .state('parent.child1', { url: '/child1', templateUrl: 'child1.html', controller: 'Child1Ctrl' }) .state('parent.child2', { url: '/child2', templateUrl: 'child2.html', controller: 'Child2Ctrl' }) ``` In `ParentCtrl`, I have a property `selectedItem` that I want to preserve when switching between `child1` and `child2`. Here’s the relevant part of the controller: ```javascript app.controller('ParentCtrl', function($scope) { $scope.selectedItem = null; $scope.selectItem = function(item) { $scope.selectedItem = item; }; }); ``` However, when I navigate to `child2`, the `selectedItem` resets to `null`. I've tried using a service to share the state between controllers, but I’m still having trouble because the child controllers seem to override the parent scope. Here’s how I attempted to implement the service: ```javascript app.service('SharedService', function() { this.selectedItem = null; }); ``` And then injecting it into both `ParentCtrl` and `Child1Ctrl`, but I still see that the selected item does not continue when switching views. I get the following behavior in the console: "want to read properties of null (reading 'name')" which indicates that something is not being set correctly when I switch views. How can I properly manage the state in these nested views without losing the selected item? Any tips or best practices would be greatly appreciated! Any ideas what could be causing this? My team is using Javascript for this application.