Q:

angularjs service confusion

Below element is within my mainController
<img src="loader.gif" ng-hide="done_ajax"/>

and I can't alter using $scope.done_ajax because my ajax is done in another controller. How can I communicate between mainController and my controller2? 
app.service('finished_request', function(){

});

callAPI("getUser", {
            method: "GET"
        }).done(function (resp) {

            $scope.$apply(function () {

            });

});

A:

If you want to share data between two controllers, you can use Service. Service are singletons, so you can easily share your data. 
However, you want to notify when you have changed your data, so to achieve this, you should use the $broadcast() and $on() method.

$broadcast : dispatches the event downwards to all child scopes

As there is no parent-child relation between your scopes, if your controllers are at the same level, you can inject $rootScope into the controller and broadcast the event to all child scopes.
EDIT
there is example by using Service and broadcast parameter.
So you can do : 
Controller
(function(){

function Controller($scope, $rootScope, Service) {

  $scope.data = 1;

  $scope.set = function(n){
    $scope.data = n;
    Service.set($scope.data);
    $rootScope.$broadcast('set', $scope.data);
  }

}

angular
.module('app', [])
.controller('ctrl', Controller);

})();

(function(){

function Controller($scope, Service) {

  $scope.$on('set', function(e, data){
    $scope.data2 = Service.get();
    $scope.data3 = data;
  });

}

angular
.module('app')
.controller('ctrl2', Controller);

})();

Service
(function(){

  function Service(){

    var data;

    function get(){
      return data;
    }

    function set(value){
      data = value;
    }

    return {
      get: get,
      set: set
    };

  }

  angular
    .module('app')
    .factory('Service', Service);

})();

HTML
  <body ng-app='app'>

    <h3>Controller 1</h3>
    <div ng-controller="ctrl">
      <button ng-click="set(data)">change</button>
      <input type="text" ng-model="data">
    </div>

    <h3>Controller 2</h3>
    <div ng-controller="ctrl2">
      <p>Data from controller 1 : {{data2}}</p>
      <p>Data from controller 1 without service : {{data3}}</p>
    </div>

  </body>

Now, you will be able to communicate between differents controllers, and retrieve data by using Service.
You can see the Plunker
Just by using Service singleton
Controller
(function(){

function Controller($scope, Service) {

  $scope.data = 1;

  $scope.set = function(n){
    Service.set(n)
  }

}

angular
.module('app', [])
.controller('ctrl', Controller);

})();

(function(){

function Controller($scope, Service) {
  //Retrieve service instance
  $scope.data_service = Service;

}

angular
.module('app')
.controller('ctrl2', Controller);

})();

HTML
  <body ng-app='app'>

    <h3>Controller 1</h3>
    <div ng-controller="ctrl">
      <button ng-click="set(data)">change</button>
      <input type="text" ng-model="data">
    </div>

    <h3>Controller 2</h3>
    <div ng-controller="ctrl2">
      <p>Data from controller 1 : {{data_service.get()}}</p>
    </div>

  </body>

Here, we just share the instance of our Service.
You can see the Plunker with Service

