Angularjs How to update partial template - angularjs

Question

I would like to know how to make controller function work whenever I change the state.
This is the main template of my Angular app:
<div>
<div ng-include="'/navigation.html'"></div>
<div>
<!-- Page wrapper -->
<div ng-include="'/topnavbar.html'"></div>
<!-- Main view -->
<div ui-view></div>
<!-- Footer -->
<div ng-include="'/footer.html'"></div>
</div>
</div>
In navigation panel I have ng-repeat:
<ul ng-controller="NavigationCtrl" class="nav nav-second-level">
<li ng-repeat="user in users" ui-sref-active="active">
<a ui-sref="account">{{user.name}}</a>
</li>
</ul>
So, whenever I change the state, I would like to update this scope var users.
I think this is well known problem, but I am new in Angular so help me please.

Answer 1

Well, I see two ways here:
1) Listening for state events, and do callback that updates user data. Docs here: https://github.com/angular-ui/ui-router/wiki#state-change-events
2) I assume that users array comes from service, something like:
...
$http.get('/users', function(data){
return data;
});
...
so, instead of this, you can store an array locally in service(which is singleton), and update it from any places, it that way you'll have a link to array in 'NavigationCtrl', and data will be updated there as well.
What I mean:
function UserService($http) {
var users = []; //inital array
var updateUsers = function() {
//get to update users here
};
var getUsers = fucntion() {
return users;
}
return {
updateUsers : updateUsers, //this method will be called when you need to update user list
getUsers : getUsers //this method will be called in NavigationCtrl
}
}
Update:
Here what I meant in pt.2 http://plnkr.co/edit/U2XwXNEqAxRrEa0VpYAu?p=preview