title: Angularjs: data binding not successful
body: <p>In a angularjs project, I want get user data from rails server and then use data. For this, I have a <code>record.js</code> and <code>sessionService.js</code>. I send request from <code>record.js</code> to <code>sessionService.js</code> and then recieve response.</p>
  
  <p>I put <code>js</code> file and echo of data  below:</p>
  
  <p><code>record.js</code>:</p>
  
  <pre><code>'use strict';
  var app = angular.module('app');
  
  app.controller('RecordCtrl',['$scope','Session','Records',function($scope, Session, Records){
      $scope.user = Session.requestCurrentUser();
      //echo $scope.user:
      //[object Object] 
  }]);
  </code></pre>
  
  <p><code>sessionService.js</code>:</p>
  
  <pre><code>    'use strict';
      angular.module('sessionService', [])
      .factory('Session', function($location, $http, $q) {
              requestCurrentUser: function() {
                  if (service.isAuthenticated()) {
                      return $q.when(service.currentUser);
                      //echo service.currentUser:
                      //Object {then: function, catch: function, finally: function}
                      //catch: function (a){return this.then(null,a)}
                      //arguments: (...)
                      //get arguments: function ThrowTypeError() { [native code] }
                      //set arguments: function ThrowTypeError() { [native code] }
                      //caller: (...)
                      //get caller: function ThrowTypeError() { [native code] }
                      //set caller: function ThrowTypeError() { [native code] }
                      //length: 1
                      //name: ""
                      //prototype: Object
                      //constructor: function (a){return this.then(null,a)}
                      //__proto__: Object
                      //__proto__: function Empty() {}
                      //&lt;function scope&gt;
                      //finally: function (a){function b(a,c){var d=e();c?d.resolve(a):d.reject(a);return d.promise}function d(e,f){var g=null;try{g=
      //then: function (b,f,h){var m=e(),I=function(d){try{m.resolve((P(b)?b:c)(d))}catch(e){m.reject(e),a(e)}},y=function(b){try{m.resolve((P(f)?f:d)(b))}catch(c){m.reject(c),a(c)}},F=function(b){try{m.notify((P(h)?h:c)(b))}catch(d){a(d)}};g?g.push([I,y,F]):l.then(I,y,F);return m.promise}
                      //__proto__: Object
  
  
          } else {
                      return $http.get('/api/users').then(function(response) {
                          service.currentUser = response.data.user;
                          return service.currentUser;
                          //echo service.currentUser:
                          //Object {id: 2, email: "mgh@mgh.com", created_at: "2014-08-11T08:37:59.981Z", updated_at: "2014-08-25T09:24:53.919Z"} 
                      });
                  }
              },
  
              currentUser: null,
  
              isAuthenticated: function(){
                  return !!service.currentUser;
              }
          };
          return service;
      });
  </code></pre>
  
  <p>I don't know why I can get and see data in <code>sessionService</code>, but I can't recieve data in <code>record.js</code> and use it. How can I fixed this problem?</p>
  
  <p>Edit: Add <code>app.js</code>:</p>
  
  <pre><code>'use strict';
  
  angular.module('app',['ngRoute', 'ngResource', 'sessionService', 'recordService'])
          .config(['$httpProvider', function($httpProvider){
              $httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content');
              var interceptor = ['$location', '$rootScope', '$q', function($location, $rootScope, $q) {
                  function success(response) {
                      return response
                  };
  
                  function error(response) {
                      if (response.status == 401) {
                          $rootScope.$broadcast('event:unauthorized');
                          scope.$apply(function() { $location.path("/route"); });
                          console.log('app 401');
                          $location.path('/users/login');
  //                        $window.location.href = 'http://www.google.com';
                          return response;
                      };
                      return $q.reject(response);
                  };
  
                  return function(promise) {
                      return promise.then(success, error);
                  };
              }];
  
  //            $httpProvider.responseInterceptors.push(interceptor);
              $httpProvider.interceptors.push(interceptor);
          }])
          .config(['$routeProvider',function($routeProvider, $locationProvider){
              $routeProvider
                      .when('/',               {controller: 'HomeCtrl',    templateUrl: '&lt;%= asset_path('templates/index.html') %&gt;'})
                      .when('/record',         {controller: 'RecordCtrl',  templateUrl: '&lt;%= asset_path('templates/record/index.html') %&gt;'})
                      .when('/users/login',    {controller: 'UsersCtrl',   templateUrl: '&lt;%= asset_path('templates/users/login.html') %&gt;'})
                      .when('/users/register', {controller: 'UsersCtrl',   templateUrl: '&lt;%= asset_path('templates/users/register.html') %&gt;'})
                      .otherwise(              {redirectTo: '/'});
          }]);
  </code></pre>