title: Setting and getting data value from service in Angular JS
body: <p>So this is my service that I use to fetch user details.</p>
  
  <pre><code>angular.module('app')
  .factory('userDetailService', function($http) {
      var userData = {};
  
      function getUserDetails(userId) {
          if (userId) {
              return $http.get("/users/" + userId).success(function(data) {
                  angular.copy(data[0], userData);
              });
          }
      }
      return {
          userData: userData,
          getUserDetails: getUserDetails
      }
  })
  </code></pre>
  
  <p>Now in <code>Controller 1</code> that uses this service, I have this bit of code which works fine as I get the relevant data.</p>
  
  <pre><code>$scope.getUserId = function(userId) {
          if (userId) {
              $scope.userData = userDetailService.userData;
              userDetailService.getUserDetails(userId).success(function() {
                  console.log($scope.userData); //Prints valid user data
              });
          }
   };
  </code></pre>
  
  <p>After this function executes in <code>Controller 1</code>, I try to do the following in <code>Controller 2</code>:</p>
  
  <pre><code>$scope.userData = userDetailService.userData;
  console.log($scope.userData); //Prints null
  </code></pre>
  
  <p>But <code>$scope.userData</code> is null. Isn't the whole purpose of using a service to share data between controllers? Since I have already set the value of <code>userData</code> in <code>Controller 1</code>, shouldn't I be able to access it in <code>Controller 2</code>? </p>
  
  <p>Weirdly enough, the modal dialog which is the template for <code>Controller 2</code> is able to access data in the form of <code>{{userData.first_name}}</code> or <code>{{userData.last_name}}</code>. If this works, why is <code>$scope.userData</code> null? What am I missing?</p>
  
  <p>Edit:</p>
  
  <p>Template 1:</p>
  
  <pre><code>&lt;div id="myModal" ng-controller="Controller 1"&gt;
  &lt;modal-configure-user&gt;&lt;/modal-configure-user&gt;
      &lt;a data-toggle="modal" data-target="#configureUserModal" href="#" ng-click="getUserId(user.id)" data-id="user.id"&gt;{{user.first_name + ' ' +user.last_name}}&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Template 2:</p>
  
  <pre><code>&lt;div ng-controller="Controller 2"  id="configureUserModal"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Both are modal dialog windows.</p>