title: Passing data from one controller to another in Angular
body: <p>I'm trying to pass some data from a selectbox from one controller to another page with different controller in Angular, but I can't seem to get it working. Could some one help me with this?</p>
  
  <p>This is the selectbox with the DataCtrl:</p>
  
  <pre><code>&lt;div class="searchbox" ng-controller="DataCtrl"&gt;
    &lt;div class="plumber-by-city col-sm-12 home-text-col"&gt;
     &lt;select ng-model="selectedItem" ng-change="change()" ng-options="item as item.city for item in items"&gt;&lt;/select&gt;&lt;span class="fa fa-caret-down"&gt;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>On change I am taking the value from the selectbox and placing it into $rootScope:</p>
  
  <pre><code>$scope.change = function() {
    $scope.type = $routeParams.type;
      console.log($scope.type);
    $rootScope = $scope.selectedItem.city;
      console.log($rootScope);
  };
  </code></pre>
  
  <p>In the second controller I am trying to get the data from $rootScope and use it there but is not working</p>
  
  <pre><code>app.controller('DataCtrl2', function($rootScope,$scope,$http) {
    $scope.selectedItem.city = $rootScope.selectedItem.city;
    console.log($rootScope.selectedItem.city);
  });
  </code></pre>