TypeError: Cannot read property 'bind' of undefined at Controller.NgModelController

Question

Im trying to update my project from angularjs version 1.2 to 1.7.9. However i did not find any issue untill 1.5. But from 1.6 onwards i am getting the below error:

TypeError: Cannot read property 'bind' of undefined at Controller.NgModelController (VM2951 angular.js:29413)

@angular.js:29413 => this.$$updateEventHandler = this.$$updateEventHandler.bind(this);

package.json

"dependencies": {
  "angular": "1.7.0",
  "angular-animate": "1.7.0",
  "angular-sanitize": "1.7.0",
  "angular-ui-router": "0.3.2",
  "angular-form-lib": "2.2.1",
  ...
}

index.js

var moduleName = module.exports = 'test';

angular
  .module(moduleName, [
    require('angular-ui-router'),
    require('../api/')
  ])
  .config(['$stateProvider', function ($stateProvider) {
    $stateProvider.state('test', {
      url: '/test',
      template: require('./xx.html'),
      controller: 'TestController as vm'
    });
  }])
  .controller('TestController', require('./TestCtrl'))

TestCtrl.js

module.exports = ['$scope','$rootScope',
  function ('$scope','$rootScope') {
      var vm = this;
          vm.toggle = false;

      ....
}];

test.html

<input type="radio" name="test_toggle" id="test-toggle-1" 
                 ng-model="vm.toggle" ng-value="true"
                 ng-change="vm.clickHandler('test')">

This issue mainly appears with the form input fields where the ng-model is given for binding.

Thanks for the help.

Answer 1

I have figured it out the issue is with one of the third party angular form library where its overriding the ngmodel behaviour.

$injector.invoke(controller, Object.setPrototypeOf(this, controller.prototype), {
   '$attrs': attrs,
   '$scope': scope,
   '$element': element
});

After adding this block, binding issue is gone.