title: AngularJs unable to return data from the function
body: <p>I'm trying return the data from the function getShiftDetails()  </p>
  
  <pre><code>SS_Mod_App.controller("SS_Ctrl", function ($scope, $http, $location, $window, $sce) {
  
       var ShiftDetails = []; var ShiftDtls = [];
  
      ShiftDtls = getShiftDetails();
        //  alert(ShiftDtls);  --&gt;  ShiftDtls undefined
          insertDaysHtml(ShiftDtls);  
  
  function getShiftDetails() {
          $http({
              method: 'GET',
              url: 'http://xxxxx/api/Shift/GetShiftDetails',
              params: { }
              , headers: { 'Content-Type': 'application/json; charset=utf-8', 'dataType': 'json' }
          }).then(function successCallback(response) {
              ShiftDetails = response.data;               --&gt; successful response with data     
              alert(JSON.stringify(ShiftDetails.length));    --&gt;  getting length 21 here
              return ShiftDetails;  
          }, function errorCallback(response) {  });
      }
  </code></pre>
  
  <p>and want to pass it to the next function insertDaysHtml where I want iterate it and fetch data  of the ShiftDetails as below but getting errors as below .</p>
  
  <pre><code> function insertDaysHtml(ShiftDtls) {    
          alert(JSON.stringify($scope.ShiftDetails.length));   --&gt; Length "0" here
      //alert(JSON.stringify(ShiftDtls.length)); Error msg: TypeError: Cannot read property 'length' of undefined
      // if (ShiftDtls.length &gt; 0) {  --&gt; Error msg: TypeError: Cannot read property 'length' of undefined
  
          if ($scope.ShiftDtls.length &gt; 0) {  
             // alert(ShiftDtls.length );
              dayhtmlContent = dayhtmlContent + '&lt;tr&gt; '
              for (var j = 0; j &lt;= ShiftDtls.length; j++) {
                  dayhtmlContent = dayhtmlContent + '&lt;td&gt; $scope.ShiftDtls[ ' + j + '].ShiftName[0]));'                 
              }
  
          $scope.divHtmlDay = $sce.trustAsHtml(dayhtmlContent);
      }
  </code></pre>