CODEWITHSUNDEEP
angularjs
Hola Soy Edu Feliz Navidad
Hola Soy Edu Feliz Navidad

Reputation: 7072

Dynamic link to ng-model

I have a table which is created by a jQuery component. In each row there is a select component which I can set to be linked to a ng-model, something like this: 

<select ng-model="categories" ng-options="k as v for (k,v) in categories"></select>

My problem is that I don;t know when it is rendered, so I had to use n ugly $timeout, but even calling $scope.$apply() it doesn't bind to the items. How can I force binding the select with element. P.S. I'm using AngularJS 1.6

Upvotes: 0

Views: 72

Answers (1)

Petr Averyanov
Petr Averyanov

Reputation: 9476

If you have some js code (i.e. jQuery) that creates some angular html, you need to $compile all created html so bindings will work. I.e. this:

angular.element(document.body).append(angular.element('<input ng-model="x"/>'));

will just add some html, while this:

angular.element(document.body).append($compile(angular.element('<input ng-model="x"/>'))($scope));

will add input and bind x to its value.

http://plnkr.co/edit/PyIO02p3EHzpmC0cUA4V?p=preview

Upvotes: 2

Related Questions