CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangular-ui-bootstrap
enthiran
enthiran

Reputation: 51

Angular UI/bootstrap typeahead showing 'Error: No controller: ngModel' error

In my application I am calling an http service to get data and I am using angular-ui bootstrap's typeahead directive (ui-bootstrap-tpls-0.6.0.min.js). I have a partial that has a form that mentions the controller and it includes a partial inside ng-repeat. This second partial has the typeahead.

Main form partial:

<form
    id="myform" 
    name="myform"
    onsubmit="javascript: return false"
    enctype="application/json"
    ng-controller="EducationCollegeCtrl">
    // doing other stuff
    ...

    <div ng-if="model.hasData">
        <div ng-repeat="college in model.academicRecords" ng-form="collegeForm">
            <div ng-include="'resources/appc/modules/main/education/components/collegetype.all.html'"></div>
        </div>
    </div>
    // other stuff going on here

collegetype.all.html:

....
        <label for="institution">Institution name:</label>
        <div>
              <input type="text" ng-model="college.organizationName"  typeahead="item.name for item in matchingInstitutions($viewValue)>
        </div>
        ....

EducationCollegeCtrl.js:

angular.module('theApp',['ui.bootstrap']).controller('EducationCollegeCtrl', function ($scope, $http) {
   ...
    $scope.matchingInstitutions = function(partialName) {
        return $http.get('lookup/institutions?name=' + partialName ).then(function(response){
            return response.data.institutions;
        }); 
    };

   ...

The service gets called and the drop-down shows up correctly with the name of institutions. But in the browser console, I see the below error for every entry in the drop-down

console.log:

Error: No controller: ngModel
at Error (<anonymous>)
at getControllers (/resources/lib/angular/1.1.5/angular.js:4899:39)
at nodeLinkFn (/resources/lib/angular/1.1.5/angular.js:5040:55)
at compositeLinkFn (/resources/lib/angular/1.1.5/angular.js:4626:37)
at nodeLinkFn (/resources/lib/angular/1.1.5/angular.js:5033:40)
at compositeLinkFn (/resources/lib/angular/1.1.5/angular.js:4626:37)
at publicLinkFn (/resources/lib/angular/1.1.5/angular.js:4531:46)
at ngRepeatAction (/resources/lib/angular/1.1.5/angular.js:15638:33)
at Object.$watchCollectionAction (/resources/lib/angular/1.1.5/angular.js:8867:29)
at Object.applyFunction [as fn] (<anonymous>:778:50) <typeahead-match index="$index" match="match" query="query" template-url="templateUrl" class="ng-isolate-scope ng-scope"> angular.js:6422

My understanding of the error is that a 'required' attribute in the directive is missing and that is what angular is complaining about, but as you can see in the partial, I do have the ng-model attribute defined and also the controller is specified in the main form partial. What am i missing here ?

EDIT: removed irrelevant parts of url.

Upvotes: 5

Views: 915

Answers (1)

iuriisusuk
iuriisusuk

Reputation: 434

ng-include creates child $scope, that prototypically inherits it's parent $scope. That means that your ng-model="college.organizationName" won't reference college variable in parent but will shadow it. And your new college variable won't have organizationName property. The most simple way probably will be just not to use ng-include, since you have ng-repeat and already avoided "don't repeat yourself" rule.

Upvotes: 0

Related Questions