ngTagsInput not binding to model

Question

I just started using the ngTagsInput angular library and I am having issues with it updating the model. I show the tag input in an ionicPopup and interestingly the on-tag-added event fires which shows that $scope.sites[] IS populated.

When I call $scope.test() the array is empty. The only context in which it holds a value is the method tied to the on-tag-added event.

Here is a simplified controller example:

$scope.sites = [];

$scope.addSites = function() {
    // this works
    console.log("In addSites");
    console.dir($scope.sites);
}

$scope.test = function() {
  // in any other method $scope.sites is empty
  console.dir($scope.sites);
}

In my view I have the tag element defined as:

<tags-input ng-model="sites" add-on-space="true" placeholder="Add Site Numbers" on-tag-added="addSites($tag)"></tags-input>

I find it incredibly strange that a $scope variable can contain the values I expect within the context of the library event but not outside of that.

Is there anything special that needs to be done in terms of binding? As far as the documentation goes I don't see what I am missing. Any suggestions would be much appreciated.

Answer 1

After a lot of trial and error I ended up solving this by doing the following.

<tags-input ng-model="$parent.sites" add-on-space="true" placeholder="Add Site Numbers" on-tag-added="addSites($tag)"></tags-input>

I was already passing 'scope : $scope' in my call to $ionicPopup({}) but without the ng-model set to "$parent.sites" it wasn't binding correctly.

Hopefully this saves somebody down the road from pulling their hair out!