Unable to display angularjs page data after route change. - angularjs

Question

I am relatively new to angularjs and seems like I am missing something obvious here. I tried to go through documentation and tutorials, but unable to find any solution to my problem.
I have a REST service at "localhost:8080/app/rest/schools/{schoolId}/selectedindicators". I can display the results in an angularjs app page (selectedindicator.html) like so:
<tbody>
<tr ng-repeat="selectedindicator in selectedindicators">
<td>{{selectedindicator.id}}</td>
<td>{{selectedindicator.school.name}}</td>
<td>{{selectedindicator.userId}}</td>
<td>{{selectedindicator.dateVisit}}</td>
<td>
<button type="submit"
ng-click="update(selectedindicator.id)"
class="btn">
<span class="glyphicon glyphicon-pencil"></span> Edit
</button>
</td>
</tr>
</tbody>
Until this point everything is working fine. But, when I try to select one of the selected indicators by clicking on the Edit button I can not display the data on the Edit (selectedindicatorForm.html) page. Here is chunk of my Edit page.
<div>
<div class="form-group">
<label>ID</label> <input type="text" class="form-control" name="id"
ng-model="selectedindicator.id" required>
</div>
.
.
.
.
.
.
</div>
Here is my routeProvider code:
myApp
.config(['$routeProvider', '$httpProvider', '$translateProvider',
function ($routeProvider, $httpProvider, $translateProvider) {
$routeProvider
.when('/selectedindicator', {
templateUrl: 'views/selectedindicators.html',
controller: 'SelectedIndicatorController',
resolve:{
resolvedSelectedIndicator: ['SelectedIndicator', function (SelectedIndicator) {
return SelectedIndicator.query();
}]
}
})
.when('/selectedindicatorForm',{
templateUrl: 'views/selectedindicatorForm.html',
controller: 'SelectedIndicatorFormController',
})
}]);
Here is my controller code for the update method:
myApp.controller('SelectedIndicatorController', ['$scope', '$location', '$route','resolvedSelectedIndicator', 'SelectedIndicator',
function ($scope, $location,$route, resolvedSelectedIndicator, SelectedIndicator) {
$scope.selectedindicators = resolvedSelectedIndicator;
$scope.update = function (id) {
$scope.selectedindicator = SelectedIndicator.get({id: id});
$location.path("/selectedindicatorForm");
};
}]);

Answer 1

you can add a separate service (singleton object) to pass data between controllers .
looks like you SelectedIndicator (which is passed onto SelectedIndicatorController) is already doing that and you can simply re-use it .
On your SelectedIndicatorFormController inject this service SelectedIndicator and call SelectedIndicator.get({id: id});
Note - looks like this line $scope.selectedindicator = SelectedIndicator.get({id: id}); inside SelectedIndicatorController doesn't serve any purpose.
If you could setup a plunk, I could help you.

Answer 2

Is there some reason you're transitioning using $location.path?
The way I'd do that would be just put an or something, with a class="btn" or some other css styling if you really want it to look like a button. With regular ngRoute, you just work with URLs, and should put all the state into the URL. I'm pretty sure setting a $scope variable and then manually changing the state doesn't actually do anything, since the new state has its own $scope.
To be perfectly frank after looking at that code, I'm going to say that you probably ought to read some angular tutorial stuff. I found egghead.io to be pretty great myself.