I am using ngRepeat to generate a fieldset of checkboxes.

I do this as follows:

<fieldset id=country_select ng-controller=CountriesListController>

        <span ng-repeat=country in countries>

          <label>

            <input type=checkbox id=country.name ng-change=locationAdd(country.name)>

            {{country.name}}

          </label><br/>

        </span>

</fieldset>

However for some reason adding the ngChange directive to my checkbox causes my ng-repeat output to display only one checkbox as follows:

checkbox {{country.name}}

When I change ngChange to ngClick my ngRepeat loop works.

So my question is: Why does ngChange not work with ngRepeat but ngClick does when inserted into my checkbox input

I get the following error in my console:

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

http://errors.angularjs.org/1.3.7/$compile/ctreq?p0=ngModel&p1=ngChange

at REGEX_STRING_REGEXP (http://localhost:9000/bower_components/angular/angular.js:63:12)

at getControllers (http://localhost:9000/bower_components/angular/angular.js:7535:19)

at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7724:33)

at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7073:13)

at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7076:13)

at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7076:13)

at publicLinkFn (http://localhost:9000/bower_components/angular/angular.js:6952:30)

at $get.boundTranscludeFn (http://localhost:9000/bower_components/angular/angular.js:7091:16)

at controllersBoundTransclude (http://localhost:9000/bower_components/angular/angular.js:7747:18)

at ngRepeatAction (http://localhost:9000/bower_components/angular/angular.js:24524:15)angular.js:11592 (anonymous function)angular.js:8542 $getangular.js:14241 $get.Scope.$digestangular.js:14486 $get.Scope.$applyangular.js:9644 doneangular.js:9834 completeRequestangular.js:9775 requestLoaded