title: Angular data from service not showing on the frontend
body: <p>Ive made 3 views and linked them to a single controller. In my controller, I am calling a service which I have made which makes a network call and gets some data which I am supposed to display on the frontend. The trouble is, that it is not showing this data despite me doing everything properly. </p>
  
  <p>This is how the structure looks. </p>
  
  <p>Routes: </p>
  
  <pre><code>$stateProvider
    .state('app.view1', {
      url: '/view1',
      templateUrl: 'scripts/modules/testModule/views/view1.html',
      controller: 'testModuleCtrl',
      controllerAs: 'vm',
      resolve: {
        InitialData: authResolver
      }
  
  
    }).state('app.view2', {
      url: '/view2',
      templateUrl: 'scripts/modules/testModule/views/view2.html',
      controller: 'testModuleCtrl',
      controllerAs: 'vm',
      resolve: {
        InitialData: authResolver
      }
  
  
    }).state('app.view3', {
      url: '/view3',
      templateUrl: 'scripts/modules/testModule/views/view3.html',
      controller: 'testModuleCtrl',
      controllerAs: 'vm',
      resolve: {
        InitialData: authResolver
      }
  
  
    })
  </code></pre>
  
  <p>Controller: </p>
  
  <pre><code>    (function () {
     'use strict';
  
    angular
      .module('com.module.testModule')
      .controller('testModuleCtrl', testModuleCtrl);
  
    testModuleCtrl.$inject = ['$state','$rootScope','UserService', '$stateParams', 'ReportService','SharedDataService','BlogService',
  'toastr', 'InitialData', 'SharedFunctionService'];
    function testModuleCtrl($state, $rootScope, UserService, $stateParams, ReportService, SharedDataService,BlogService,
                       toastr, InitialData, SharedFunctionService) {
      var vm = this;
  
       vm.getUserData = getUserData;
  
  
  
  
       vm.goToPage1 = goToPage1;
       vm.goToPage2 = goToPage2;
      vm.goToPage3 = goToPage3;
  
  function goToView1(){
    $state.go('app.view1');
    getUserData("someArg");
  
  
  }
  
  function goToView2(){
  
    console.log("Going to View 2")
    $state.go('app.view2');
    getUserData("someArg");
  
  
  }
  
  function goToView3(){
    console.log("Going to View 3")
    $state.go('app.reportView3');
  
  
  }
  
  function getUserData(argumentType) {
    ReportService.GetTestReport("someArg").then(function reportSuccessCallback(result) {
      vm.result = result.data;
      console.log("CHECK OUT THIS RAD RESULT, BRO ----&gt; ");
          console.log(vm.result);
            }, function reportErrorCallback(reason) {
          vm.reason = reason.data;
          console.log("The reason of failure is this --=&gt; ")
          console.log(vm.reason);
        })
      } 
      }  
      })();
  </code></pre>
  
  <p>In the html, I am trying to render this result by doing 
      {{ vm.result }}</p>
  
  <p>but it is not showing. I am managing the scope too. Doing everything as prescribed in the John-Papa Style guidelines for Angular 1.x </p>
  
  <p>Ive been on this since morning and I am about to pull my hair out. What am I doing wrong here? I am trying to everything in a very optimized manner. 
  Ps. New Here. </p>
  
  <p>EDIT: 
  As per request, I am adding the service code too. </p>
  
  <p>Service</p>
  
  <pre><code>(function () {
    'use strict';
  
    angular
      .module('com.module.tests')
      .factory('ReportService', ReportService);
  
    ReportService.$inject = ['$http','ENV'];
    function ReportService($http,ENV) {
  
      var baseUrl=ENV.apiUrl+'/tests/';
  
      var service = {
  
    GetTestReport: GetTestReport
  
  };
  
  return service;
  
  
  
  function GetTestReport(type){
    return $http.get(baseUrl + type + '/testReport').then(handleSuccess, handleError);
  }
  
  
  
  
  // private functions
  
  function handleSuccess(res) {
    return res.data;
  }
  
  function handleError() {
    return {success: false}
  }
  
    }
  
  })();
  </code></pre>