AngularJS: Global variable for two instances of the same controller?

Question

Angular

Hello.
There is a controller that needs to be displayed twice on the page, in different places, and partially with different functionality.
The fact is that when the controller is initialized, it loads the data remotely; when interacting with the controller, the data changes, which should happen centrally.
The controller has a variable controllVar = this; controllVar.data is loaded with data that changes during use.
It is necessary to take out the loading of data outside of this controller (loading occurs at page startup and by timer), and give the controller access to this data.
I'm new to Angular, I tried to synchronize using services - it didn't work, I scored.
Here is a piece of this controller:

app.controller('SomeController', ['$http', function($http){
    var  controllVar= this;
     controllVar.data= [];
     controllVar.exists = 0;
    //Function to load Friendsdata
    $http.get(api+'?getFoo').success(function(data){
      controllVar.data = data;
      if(jQuery.isEmptyObject(data))
         controllVar.exists = 1; 
    });

Thank you.

Answer 1

Take all this data to a service that will store it centrally.
// EDIT
The head is not cooking at all, I sketched out the code on your knee for you.)
I would do something like this.

app.service('Foo', function($q, $http) {
  // Promise cache
  var cache = {};
  
  // Consider we've some url
  var API_URL = '/api/v1/';
  
  /**
   * Get friends data
   */
  this.getFriendsData = function() {
    return apiCall('getFriendsData');
  };
  
  /**
   * Get upcoming events
   */
  this.getUpcomingEvents = function() {
    return apiCall('getUpcomingEvents', {since: Date.now()});
  };
  
  function apiCall(method, params) {
    // Check internal cache
    if (!cache[method]) {
      // Create new deferred for method
      var deferred = $q.defer();
      cache[method] = deferred.promise;
      
      // Merge params
      // e.g. some tokens/keys may exist in default params
      var data = {params: angular.extend({}, params)};
      
      // Process request
      $http.get(API_URL + method, data).then(function(response) {
        deferred.resolve(response);
      });
    }
    
    return cache[method];
  }
});

app.controller('FirstCtrl', function(Foo) {
  // viewmodel reference
  var vm = this;
  
  Foo.getFriendsData().then(function(friendsData) {
    vm.friendsData = friendsData;
  });
});

app.controller('SecondCtrl', function(Foo) {
  // viewmodel reference
  var vm = this;
  
  Foo.getUpcomingEvents().then(function(upcomingEvents) {
    vm.upcomingEvents = upcomingEvents;
  });
  
  Foo.getFriendsData().then(function(friendsData) {
    // $http.get won't be called, getting data from promise cache
    vm.friendsData = friendsData;
  });
});

Answer 2

1. See the use of services. Do any external calls through services - then it will be easier. Moreover, you have a whole API there.
2. If there are 2 or more identical places on the page - make your life easier, write a directive.

var  controllVar= this;
     controllVar.data= [];
     controllVar.exists = 0;

What's the crap? Where is your $scope?