AngularJS ng-change not working for Angularjs $compile

Question

Error: $compile:ctreq
Missing Required Controller
Controller 'ngModel', required by directive 'ngChange', can't be found!

sample code

    //create dynamic UI

var targetQDom = '<div  id="' + item.id + '" style="width=100%;background: white;"  ><div class="head" style="border-bottom-color: azure;border-bottom-style: double;"><a style="color:aliceblue"><i class="fa fa-times-circle-o fa-fw fa-2x bt-right" style="margin-top: -4px;" ng-change="removeR(' + item.id + ',' + (index + 1) + ',$event)"></i></a> <a style="color:white;" data-toggle="collapse" class="collapsed" data-target="#' + item.id + '-rule-' + (index + 1) + '" ng-change="targetqClick(' + item.od + ',' + (index + 1) + ',' + item.req + ')" >' + item.text + '</a></div></div>';
var $targetQDom = window.j$(targetQDom).appendTo('#appendRules');
$compile($targetQDom)($scope);

the above code will be there in the controller. above code is dynamically creating HTML based on model data. after running app I am getting the above error in console and it not creating UI.

If I user using the ng-click the above code works fine.

other issues with MAC OS Google chrome

but ng-click has issued in MAC OS google chrome drop-down change not working. . If I try to change drop down value it's not triggered.so the target drop-down value is not changing.

HTML control has the model. but I am creating dynamic HTML here. yes, it has the ng-model. — Jagadisha B S, Aug 10 '18 at 11:33
ng-model="selectedsome' + $scope.some + '" ng-change="somechange(' + $scope.someindex + ',$event)" Is not valid, if you want to access your scope data in the html you have to remove the $scope. it should be just `ng-model="selectedsome' + some + '" ng-change="somechange(' + someindex + ',$event)"` But like cst said, post some code so we can help further — Sven, Aug 10 '18 at 12:12

score 0 · Answer 1 · answered Aug 10 '18 at 15:12

I tried to replicate it and found some error on your code. check with this.

 <!DOCTYPE html>
 <html>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 
 </script>
 <body ng-app="myApp">
 <div ng-controller="myCtrl">

 <div id="someid" style="float: left;">
  <select id="some-condition-list" class="some-control cursor_Hand" 
  ng-model="selectedsome"  ng-change="somechange(someindex,$event)" >
  <option value="">Show All</option>
 <option ng-repeat="some in somes.condtions " value="{{some.Id}}">{{some.name}} 
</option>
</select>

</div>

<script>
   angular.module('myApp', [])
     .controller('myCtrl', ['$scope', function($scope) {
  $scope.count = 0;
  $scope.some="Hey";
  $scope.somes ={};
  $scope.somes.condtions =[];
  $scope.somes.condtions =[{'Id':'1', 'name':"Gayani"},{'Id':'2', 
    'name':"Chaminda"}]; 
  $scope.selectedsome="HI";
  $scope.someindex=1;
  $scope.somechange = function(item, item1){
  alert(item);
  }
}]);
</script>
</body>

AngularJS ng-change not working for Angularjs $compile

1 Answers1