title: Sharing ng-model data between states in ui-router
body: <p>I cannot seem to be able to get this form to update my model. It worked using ng-route but I decided to changed to ui-router as I wanted to nest templates.</p>
  
  <p>I've tried a few things from here <a href="https://stackoverflow.com/questions/27696612/how-do-i-share-scope-data-between-states-in-angularjs-ui-router">How do I share $scope data between states in angularjs ui-router?</a> but no luck.</p>
  
  <p>home.html</p>
  
  <pre><code>&lt;form class="input-lg m-t m-l-n-xs hidden-lg hidden-md hidden-sm" role="search"&gt;
    &lt;div class="form-group"&gt;
      &lt;div class="input-group"&gt;
        &lt;span class="input-group-btn"&gt;
          &lt;button type="submit" class="btn btn-sm bg-white btn-icon rounded"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/button&gt;
        &lt;/span&gt;
        &lt;input type="text" ng-model="searchQuery" ng-change="changeView('search')" class="form-control input-sm no-border rounded" placeholder="Search songs, albums..."&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>  angular.module('musica', ['ui.bootstrap', 'ngFacebook', 'spotify', 'cb.x2js', 'ngRoute', 'ui.router'])
     .config(function ( $facebookProvider, SpotifyProvider, $routeProvider, $httpProvider, $stateProvider, $urlRouterProvider) {
  
      $urlRouterProvider.otherwise("/");
      $stateProvider
          .state('login', {
          url: "/",
              templateUrl: "partials/login.html",
          }).state('home', {
              templateUrl: "partials/home.html",
          }).state('home.select', {
          templateUrl: "partials/home.select.html"
          }).state('home.search', {
              templateUrl: "partials/home.search.html",
          }).state('home.queue', {
          templateUrl: "partials/home.queue.html"
          }).state('join', {
          templateUrl: "partials/join.html"
          }).state('creating', {
          templateUrl: "partials/creating_venue.html"
          }).state('home.server', {
          templateUrl: "partials/home.server.html"
          })
  
  })
  
  .controller( 'DemoCtrl', ['$scope','$rootScope', '$location', '$facebook', 'Spotify', 'x2js', '$http', '$state', 'globalStore', function ($scope, $rootScope, $location, $facebook, Spotify, x2js, $http, $state, globalStore) {
  
  $scope.searchQuery='hello';
  
  $scope.changeView = function(view){
          if(!$state.is('home.search'))
          {
              $state.go('home.search');
          } 
          $scope.searchTrack();
      };
  
  $scope.searchTrack = function () {
      console.log('searching ' + $scope.searchQuery.query);
      Spotify.search(this.searchQuery.query, 'track').then(function (data) {
          $scope.tracks = data.tracks.items;
      });
  };
  </code></pre>
  
  <p>If I then type in the search box all I get is hello and not the updated value. I thought that since I don't mention controllers in the state provider that only one controller would be instantiated. I would really like to know what is going on. Thank you very much.</p>