javascript - Best practice way to implement contoller As using UI Router

Question

Have a small search app using AngularJS and Elasticsearch. Trying to convert my the app from using $scope to controller As syntax. I'm using UI Router for my routes/states. Been trying to use

controller: 'HomeCtrl',
controllerAs: 'home'

in my state declarations. And then var vm = this; in controller to bind to the scope.

I switched ng-model="searchTerms" on my search input to ng-model="home.searchTerms" and everywhere else bindings would be needed. None of it works?

Is it better to use ng-controller="HomeCtrl as home" in a parent div? Is that best practice? Will it work with UI Router?

UPDATE I now have

var vm = this;
vm.searchTerms = searchTerms;

BUT it still does not work, I keep getting this error in Chrome console

Uncaught ReferenceError: searchTerms is not defined(…)

UPDATED CONTROLLER

'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;

Answer 1

controller: 'HomeCtrl as home' will work with ui-router.

EDIT:

You also need to define and initialize any objects/variables before or while assigning them to vm. In your updated code, you have defined searchTerms but it is not initialized. Please see the following for possible ways to rectify this assuming searchTerms is a string.

var searchTerms = '';

var vm = this;
vm.searchTerms = searchTerms;

or depending on your usage needs, you can only initialize if it is undefined:

var searchTerms = searchTerms || '';

var vm = this;
vm.searchTerms = searchTerms;

or if you don't need to have a separate internal variable, you can init vm.searchTerms directly (however in most cases I personally do not prefer this method):

var vm = this;
vm.searchTerms = '';

Regarding the rest of the posted code, you should generally expose to your view only what you need to access from there and keep the rest contained within your controller (or service/factory, etc.).

So far I have yet to come across a solid, singular set of best practices for angular, however a great place to start is John Papa's Angular Style Guide.