title: Best practice way to implement contoller As using UI Router
body: <p>Have a small search app using AngularJS and Elasticsearch. Trying to convert my the app from using <code>$scope</code> to <code>controller As</code> syntax. I'm using UI Router for my routes/states. Been trying to use</p>
  
  <pre><code>controller: 'HomeCtrl',
  controllerAs: 'home'
  </code></pre>
  
  <p>in my state declarations. And then <code>var vm = this;</code> in controller to bind to the scope.</p>
  
  <p>I switched <code>ng-model="searchTerms"</code> on my search input to <code>ng-model="home.searchTerms"</code> and everywhere else bindings would be needed. None of it works?</p>
  
  <p>Is it better to use <code>ng-controller="HomeCtrl as home"</code> in a parent div? Is that best practice? Will it work with UI Router?</p>
  
  <p><strong>UPDATE</strong>
  I now have</p>
  
  <pre><code>var vm = this;
  vm.searchTerms = searchTerms;
  </code></pre>
  
  <p>BUT it still does not work, I keep getting this error in Chrome console</p>
  
  <pre><code>Uncaught ReferenceError: searchTerms is not defined(…)
  </code></pre>
  
  <p><strong>UPDATED CONTROLLER</strong></p>
  
  <pre><code>'use strict';
  
  angular.module("searchApp.autocomplete", [])
    .controller('HomeCtrl', ['$sce', '$state', '$stateParams', 'searchService', function($sce, $state, $stateParams, searchService) {
  
      var vm = this;
      var searchTerms = searchTerms;
      vm.searchTerms = searchTerms;
  
        vm.noResults = false;
        vm.isSearching = false;
  
      vm.results = {
        searchTerms: null,
        documentCount: null,
        documents: [],
        queryTime : null,
        searchTermGrams: null,
        itemsPerPage: 10,
        maxResults: 100
      };
  
        //autocomplete
      vm.autocomplete = {
          suggestions: [],
          corrections: []
      };
      vm.showAutocomplete = false;
  </code></pre>