AngularJS: Unable to reload/refresh view from controller

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">