Ng-Repeat not updating after array update

Question

I have an array that contains objects for cards in a template to loop through. If it detects that there isn't anything in the local datastore it will create an array that contains object. Otherwise it retrieves it from the local datastore. Pressing a button will bring you to another view that shares the same controller. There is a text box and if you press the submit button it will splice it to the array. I also have a watch function updating the local datastore if change is detected.

The problem is after adding something to the array ng-repeat won't update. It will if I refresh the page only because the local datastore loads.

Any ideas?

Code: controllers.js

.controller('NotesCtrl', function($scope, localStorageService) {
if (!localStorageService.get("agendaNotes")) {
    $scope.notes = [{
        title: "Civil War Notes"
    }, {
        title: "Types of Bacon"
    }];
    //If it exists retrieve it from keystore.
} else {
    $scope.notes = localStorageService.get("agendaNotes");
}

$scope.addNote = function(title) {
    $scope.notes.splice(0, 0, {
        title: title
    })
};

$scope.$watch("notes", function(newVal, oldVal) {
    if (newVal !== null && angular.isDefined(newVal) && newVal !== oldVal) {
        localStorageService.add("agendaNotes", angular.toJson(newVal));
    }
}, true);

})

tab.notes.html

<ion-view view-title="Notes">
  <ion-content class="padding" ng-init="init()">
    <!-- To Do List for Notes:

    - Store Text in Object
    - Phonegap Camera API
    - Store Image in Object
    -->

    <a class="button button-full button-royal" href="#/tab/new">
      Add Notecard
    </a>

    <div class="card" ng-repeat="note in notes track by $index">
  <div class="item item-divider">
    {{note.title}}
  </div>
  <div class="item item-text-wrap">
    {{note.content}}  </div>
</div>
  </ion-content>
</ion-view>

new-note.html

<ion-view view-title="New Note">
    <ion-content>
        <!-- To Do:
      - Description
      - Images (?)
      -->
        <form ng-submit="addNote(data.newTitle, data.newDescription); data.newTitle = ''; data.newDescription = ''">
            <div class="list">
                <div class="list list-inset">
                    <h3>Note Title:</h1>
                    <label class="item item-input">
                        <input type="text" placeholder="Title" ng-model="data.newTitle">
                    </label>
                  <h3>Note Description:</h3>
                    <label class="item item-input">
                        <input type="text" placeholder="Description" ng-model="data.newDescription">
                    </label>
                </div>
                <button class="button button-block button-positive" type="submit">
                    Add Note
                </button>
            </div>
        </form>
    </ion-content>
</ion-view>

I have tried the $scope.$apply(function(){}) method and it returns an error in console: Error: [$rootScope:inprog] $apply already in progress

Any help is appreciated. Thanks

Answer 1

Inject $timeout (like $scope) and wrap the code where you put apply in the $timeout function call with a zero argument. This triggers a digest safely and is 'recommended'

$timeout(function() {
     // model update here
 }) 

Answer 2

I think this is due to child scoping issues and Mark Rajcok has a great answer on another similar issue - Using the same controller on different elements to refer to the same object

In brief he writes

"Each time the Angular compiler finds ng-controller in the HTML, a new scope is created. (If you use ng-view, each time you go to a different route, a new scope is created too.)

If you need to share data between controllers, normally a service is your best option. Put the shared data into the service, and inject the service into the controller:"