AngularJS multiple select box not being filled in - angularjs

Question

I have a multiple select box with a model attached to it. Here is a JSFiddle of my basic setup.
As you can see, everything works as it should - values that are in my tags dataset automatically appear in my multiple select box (which has been made into a 'tag box' using jQuery Chosen).
The problem arises when I change the source of my tags data from being hardcoded into the JS, to being retrieved via an API call.
If I replace everything inside myController with the below code, the correct data is still send to the view, but it no longer automatically fills/selects the items in the multiple select.
var path = 'http://example.com/api/tags';
$http.get(path).success(function(data) {
$scope.tags = data;
$scope.createForm = {};
$scope.createForm.tags = [];
for(var i = 0; i < $scope.tags.length; i++)
{
$scope.createForm.tags[i] = $scope.tags[i].id;
}
});
The data I am retrieving from the API call is in the exact same format as I had for the hardcoded value. What could the problem be? I want the behaviour to be the same whether the tags data is being hardcoded or loaded form an external source.

Answer 1

Once chosen is initialised, you have to trigger the update whenever the model is changed:
$(elem).trigger("chosen:updated");
And watch for any changes to your model, inside the directive:
myApp.directive("ngChosen", function ($timeout) {
return {
require: 'ngModel',
restrict: 'A',
link: function (scope, elem, attrs, ngModel) {
scope.$watch(function () {
return ngModel.$modelValue;
}, function (newValue) {
$timeout(function () {
// TRIGGER CHOSEN UPDATE
$(elem).trigger("chosen:updated");
});
}, true);
// INIT CHOSEN
$timeout(function () {
$(elem).chosen({
width: "240px"
});
});
}
};
});
DEMO