Why getting ngModel required error even when the directive is working
<p>I am getting below error in console log, although my directive is working as expected. What am I missing</p>

<blockquote>
  <p>Error: [$compile:ctreq] Controller 'ngModel', required by directive 'typeahead', can't be found!</p>
</blockquote>

<p><strong>My Directive decleration</strong></p>

<pre><code>&lt;typeahead placeholder="'Search...'"&gt;&lt;/typeahead&gt;
</code></pre>

<p>Inside directive.js</p>

<pre><code>angular.module("searchBox",[]).directive('typeahead', function($timeout,$http,ProductService) {
return {
restrict: 'AEC',
scope: {
    placeholder: '='
},

link:function(scope,element,attrs){     // link

  scope.current=0;
  scope.isCurrent=function(index){
    return scope.current==index;
  };
  scope.setCurrent=function(index){
    scope.current=index;
  };
  scope.hide = function (index){    // to hide dropdown suggestions when mouse leaves the div
    scope.watchModel="";
  };
  scope.$watch('model',function(){

        var q ='/search/?q='+scope.model;
        if(scope.model.length &gt; 3) {
            scope.watchModel = scope.model;
            $http.get(q)
            .success(function (response) {
                // do something
            }).error(function (msg) {
                console.log(msg);
            })
        }else{
            scope.items = "";
        }
    },true);

  element.bind("keydown keypress", function (event) {
     if(event.which === 13) {
       scope.searchProduct(scope.model);
       event.preventDefault();
     }
  });
},
templateUrl: '../static/views/template/searchTemplate.html',   // templateUrl

controller: function ($scope,$location,$route,SearchQueryService,$controller){  // controller
    $controller('ProductEventController',{$scope : $scope});
    $scope.model = '';
    $scope.enteredQty = 1;

    $scope.searchProduct = function (model){
     // do something
    }
  }
 } 
});
</code></pre>

<p><strong>My TemplateUrl</strong></p>

<pre><code>&lt;form action=""  class="form-search"&gt;
&lt;div class="input-group"&gt;
   &lt;input  id="searchText"
           type="text" class="form-control input-lg"
           ng-model="model"
           placeholder="{{placeholder}}" /&gt;
    &lt;span class="input-group-btn" &gt;
      &lt;button type="button" ng-click="Search_Products(message)" class="btn btn-primary btn-lg"&gt;Search&lt;/button&gt;
   &lt;/span&gt;
&lt;/div&gt;
&lt;div class="menuItem" ng-hide="(!watchModel.length)" ng-mouseleave="hide()" &gt;

    &lt;div class="searchItem scroll-pane"&gt;
        &lt;table&gt;
            &lt;tbody&gt;
                &lt;div
                     ng-repeat="product in items track by $index"
                     style="cursor:pointer"
                     ng-class="{active123:isCurrent($index)}"
                     ng-mouseenter="setCurrent($index)"&gt;

                    &lt;div class="search-product clearfix"&gt;
                        &lt;a class="search-product-image pull-left" ng-href="#productDetails/{{ product.id }}"&gt;
                            &lt;img src="{{ product.images[0] }}" alt="img"&gt;
                        &lt;/a&gt;
                        &lt;a class="search-product-title pull-left" ng-href="#productDetails/{{ product.id }}"&gt;
                            &lt;p&gt;{{ product.brand }}&lt;/p&gt;
                            &lt;span&gt;{{ product.title }} ({{ product.selectedSizeMeasureUnit }})&lt;/span&gt;
                        &lt;/a&gt;
                        &lt;a class="search-product-price pull-left" ng-href="#productDetails/{{ product.id }}"&gt;
                            &lt;p&gt; Rs {{ product.totalPriceForSelectedQtyAndSize }}&lt;/p&gt;
                            &lt;span&gt;Saved: Rs {{ product.totalSavedAmount }}&lt;/span&gt;
                        &lt;/a&gt;

                        &lt;a class="search-product-qty pull-left"&gt;
                            &lt;!--&lt;div&gt;Qty&lt;/div&gt;
                            &lt;div&gt;
                              &lt;select ng-model="product.selectedQty" ng-options="value for value in product.selectedQtyOptions" ng-change="onQtyChanged(product, product.selectedQty)"&gt;&lt;/select&gt;
                            &lt;/div&gt;--&gt;
                            Qty:&lt;input class="searchQty" type="text" name="qty" ng-model="enteredQty"&gt;
                        &lt;/a&gt;
                        &lt;a class="search-product-size pull-left"&gt;
                           &lt;div ng-show="product.sizeQtyPrice[0].size &gt; 0" &gt;Select a Size&lt;/div&gt;
                           &lt;div ng-repeat="sqp in product.sizeQtyPrice" style="display:inline"&gt;
                            &lt;button ng-click="onSizeSelected(product, this.sqp)" ng-model="product.selectedSqp" ng-show="this.sqp.size != -1"&gt;{{ sqp.size }}{{ sqp.measureUnit }}&lt;/button&gt;
                           &lt;/div&gt;
                        &lt;/a&gt;
                        &lt;a class="search-product-add btn btn-primary" ng-click="addToCart2(this.product,enteredQty)"&gt;
                            &lt;span class="add2cart"&gt;&lt;i class="glyphicon glyphicon-shopping-cart"&gt; &lt;/i&gt; ADD TO CART&lt;/span&gt;
                        &lt;/a&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/tbody&gt;
        &lt;/table&gt;
    &lt;/div&gt;
    &lt;a class="search-all" ng-click="searchProduct(model)"&gt;View All Products&lt;/a&gt;

&lt;/div&gt;
&lt;div class="searchItem scroll-pane" ng-show="noResult"&gt;
    No result found
&lt;/div&gt;
&lt;/form&gt;
</code></pre>

<p><strong>UPDATE</strong> :</p>

<p>If I add <code>ng-model="model"</code> in typeahead directive, I get below error:</p>

<pre><code>Error: input is undefined
.parse@http://127.0.0.1:8000/static/JS/ui-bootstrap-tpls-0.12.0.js:3519:11
.link@http://127.0.0.1:8000/static/JS/ui-bootstrap-tpls-0.12.0.js:3574:26
invokeLinkFn@http://127.0.0.1:8000/static/JS/Angular/angular.js:8746:9
nodeLinkFn@http://127.0.0.1:8000/static/JS/Angular/angular.js:8246:1
compileTemplateUrl/&lt;@http://127.0.0.1:8000/static/JS/Angular/angular.js:8476:1
processQueue@http://127.0.0.1:8000/static/JS/Angular/angular.js:14634:28
scheduleProcessQueue/&lt;@http://127.0.0.1:8000/static/JS/Angular/angular.js:14650:27
$RootScopeProvider/this.$get&lt;/Scope.prototype.$eval@http://127.0.0.1:8000/static/JS/Angular/angular.js:15878:16
$RootScopeProvider/this.$get&lt;/Scope.prototype.$digest@http://127.0.0.1:8000/static/JS/Angular/angular.js:15689:15
$RootScopeProvider/this.$get&lt;/Scope.prototype.$apply@http://127.0.0.1:8000/static/JS/Angular/angular.js:15986:13
done@http://127.0.0.1:8000/static/JS/Angular/angular.js:10511:36
completeRequest@http://127.0.0.1:8000/static/JS/Angular/angular.js:10683:7
requestLoaded@http://127.0.0.1:8000/static/JS/Angular/angular.js:10624:1
 &lt;typeahead class="ng-pristine ng-untouched ng-valid ng-isolate-scope" placeholder="'Search...'" ng-model="model    "&gt;
</code></pre>