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. 

This is how the structure looks. 

Routes: 

```
$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
    }

  })

```

Controller: 

```
    (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 ----> ");
        console.log(vm.result);
          }, function reportErrorCallback(reason) {
        vm.reason = reason.data;
        console.log("The reason of failure is this --=> ")
        console.log(vm.reason);
      })
    } 
    }  
    })();

```

In the html, I am trying to render this result by doing 
 {{ vm.result }}

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 

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. 

EDIT: 
As per request, I am adding the service code too. 

Service

```
(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}
}

  }

})();

```