title: when I put ng-controller in div instead of body autocomplete stops working
body: <p>I have a textbox with autocomplete capability and after clicking on click me button the text in autocomplete is added as in the table , here is the link that works perfectly fine,</p>
  
  <pre><code> var app = angular.module('app', []);
  app.factory('Service', function() {
      var typesHash = [ {
          id :1,
          name : 'lemon',
          price : 100,
          unit : 2.5
      }, {
          id : 2,
          name : 'meat',
          price : 200,
          unit : 3.3
      } ];
  
      var localId = 3;
      availableTags = [
                        "ActionScript",
                        "AppleScript",
                        "Asp",
                        "BASIC",
                        "C",
                        "C++",
                        "Clojure",
                        "COBOL",
                        "ColdFusion",
                        "Erlang",
                        "Fortran",
                        "Groovy",
                        "Haskell",
                        "Java",
                        "JavaScript",
                        "Lisp",
                        "Perl",
                        "PHP",
                        "Python",
                        "Ruby",
                        "Scala",
                        "Scheme"
                      ];
      var service = {
          addTable : addTable,
          getData : getData,
          complete:complete
  
  
      };
      return service;
      function complete($scope){
          $( "#txt" ).autocomplete({
            source: availableTags,
            messages: {
                noResults: '',
                results: function() {}
            }
          });
          $("#txt" ).on( "autocompleteselect", function( event, ui ) {
           $scope.tableTools.inputData=ui.item.value;
          } );
          } 
      function addTable(name,price) {
          typesHash.push({id:localId++, name:name, price:price,unit:1});
      }
      function getData() {
          return typesHash;
      }
  });
  app.controller('table', function(Service,$scope) {
      //get the return data from getData funtion in factory
      this.typesHash = Service.getData();
      //get the addtable function from factory 
      this.addTable = Service.addTable;
      this.complete=Service.complete($scope);
  });
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/mLxno4jIHex0zdVVzXpt?p=preview" rel="nofollow">working link</a></p>
  
  <p>but as soon as I put ng-controller="table as tableTools" in the div instead of body then autocompleting of text box start acting funny and it does not work properly </p>
  
  <p><a href="http://plnkr.co/edit/8eZ5uYOT3Vu2MGbMqieY?p=preview" rel="nofollow">not working link</a></p>
  
  <p>can anyone explain the reason and tell me how I can fix it in a way that even by putting ng-controller="table as tableTools" inside div it works?</p>
  
  <p><strong><em>Update:</em></strong></p>
  
  <p>here is the error:</p>
  
  <p><strong>Uncaught TypeError: Cannot set property 'inputData' of undefined</strong></p>
  
  <p>for this line:</p>
  
  <pre><code>$scope.tableTools.inputData = ui.item.value;
  </code></pre>
  
  <p>(remember the problem starts after you click on suggested text)</p>