AngularJS: Unable to reload/refresh view from controller - angularjs

Question

How do i refresh angularjs view from controller once the array/list is updated?
Following is my code:
<div class="main-page" ng-app="GoalsListing1">
<div ng-controller="CategoriesController as catCtrl">
<ul class="side-nav">
<li ng-class="{active: $index == catCtrl.selected}" ng-click="catCtrl.setSelected($index)" ng-repeat="cat in catCtrl.categories">
<span class="span-text">{{cat.name}}</span>
</li>
</ul>
</div>
<div id="contentsGrid">
<table ng-controller="DetailsController as detailsCtrl">
<thead>
<tr><th>Goal Name</th></tr>
</thead>
<tbody>
<tr ng-show="detailsCtrl.goalDetailsList === undefined">
<td align="center">No data found to display</td>
</tr>
<tr ng-repeat="detail in detailsCtrl.goalDetailsList">
<td>{{detail}}</td>
</tr>
</tbody>
</table>
</div>
</div>
and JS:
var app = angular.module("GoalsListing1", []);
//categories at top rendering
var goalCategories = [{"id":"1", "name":"Cat1"}, {"id":"2", "name":"Cat2"}];
//against each category its details
var goalDetails = {"Cat1":["goal1", "goal2"], "Cat2":["goal1", "goal2", "goal3"]};
//service to share data between controllers
app.service("GoalDetailService", function($rootScope){
this.goalDetail = goalDetails;
this.selectedCatName = "";
this.filteredList = {};
this.getGoalDetail = function(catName){
this.filteredList = this.goalDetail[catName];
return this.filteredList;
};
this.setGoalDetail = function(catName){
this.filteredList = this.goalDetail[catName];
};
});
//rendering side nav goal categories and set selected category
app.controller("CategoriesController", function($scope, GoalDetailService){
this.categories = goalCategories;
this.selected = 0;
GoalDetailService.selectedCatName = this.categories[this.selected].name;
GoalDetailService.setGoalDetail(GoalDetailService.selectedCatName);
this.setSelected = function(index){
this.selected = index;
GoalDetailService.selectedCatName = this.categories[this.selected].name;
GoalDetailService.setGoalDetail(GoalDetailService.selectedCatName);
};
});
//details grid rendering controller
app.controller("DetailsController", function($scope, GoalDetailService){
$scope.service = GoalDetailService;
this.goalDetailsList = GoalDetailService.filteredList;
//set watch when selection from side nav changes
$scope.$watch('service.filteredList', function(newList){
$scope.goalDetailsList = newList;
});
});
Here is the fiddle:
http://jsfiddle.net/5fnp8tgs/
When I switch between Cat1 and Cat2 the corresponding array from goalDetails list doesn't updated in View.
Please help me.

Answer 1

While the other answer solves the issue, the alias isn't a problem... you're just not using it correctly. You need to use this instead of $scope.
app.controller("DetailsController", function($scope, GoalDetailService){
var self = this;
$scope.service = GoalDetailService;
this.goalDetailsList = GoalDetailService.filteredList;
//set watch when selection from side nav changes
$scope.$watch('service.filteredList', function(newList){
self.goalDetailsList = newList;
});
});
updated jsfiddle

Answer 2

You don't need the controller here: <tr ng-repeat="detail in detailsCtrl.goalDetailsList">
Instead use this:
<tr ng-repeat="detail in goalDetailsList">
It uses the goalDetailsList from the controller's $scope, which you already declared here:
<table ng-controller="DetailsController as detailsCtrl">