Angular service with different angular app

Question

Here i am using angular service.In my case i am getting value for first app but not for second .please help me . thank you.

here is my html:-

 <div ng-app="mainApp" ng-controller="CalcController">
      <p>Enter a number: <input type="number" ng-model="number" />
      <button ng-click="multiply()">X<sup>2</sup></button>
      <p>Result: {{result}}</p>
   </div>


        <div ng-app="myApp2" ng-controller="myController2">

      <p>Enter a number: <input type="number" ng-model="numberSecond" />
      <button ng-click="multiplyValue()">X<sup>2</sup></button>
      <p>Result: {{result2}}</p>


        </div>

here is js:-

angular.module('myReuseableMod',[]).factory('$myReuseableSrvc',function()
    {
    // code here
     var factory = {};
         factory.multiply = function(a)
         {
              return a * a
         }
                return factory;
      });



var mainApp = angular.module("mainApp", ['myReuseableMod']);
mainApp.controller('CalcController',['$scope', '$myReuseableSrvc',function($scope, $myReuseableSrvc) {
    alert("inside controller");
            $scope.multiply = function()
            {
                alert("hello1");
                   $scope.result = $myReuseableSrvc.multiply($scope.number);
             }
      }]);


var mainApp2 = angular.module("myApp2", ['myReuseableMod']);
mainApp.controller('myController2',['$scope', '$myReuseableSrvc',function($scope, $myReuseableSrvc) {
    alert("inside controller");
            $scope.multiplyValue = function()
            {
                alert("hello1");
                   $scope.result2 = $myReuseableSrvc.multiply($scope.numberSecond);
             }
      }]);

Answer 1

Your 'myController2' is in the wrong app

mainApp.controller('myController2'

Should be:

mainApp2.controller('myController2'

EDIT:

Ah yes I see the problem. You cannot use ng-app twice like that. If you want what you are trying to achieve which is multiple applications you have to 'bootstrap' the second one:

plunk here: http://plnkr.co/edit/qfllLO9uy6bC5OLkHnYZ?p=preview

angular.module('myReuseableMod',[]).factory('$myReuseableSrvc',function() {
  var factory = {};
  factory.multiply = function(a) {
    return a * a
  }

  return factory;
});


var mainApp = angular.module("mainApp", ["myReuseableMod"]);
mainApp.controller('CalcController', ['$scope', '$myReuseableSrvc',function($scope, $myReuseableSrvc) {

  $scope.multiply = function() {
    $scope.result = $myReuseableSrvc.multiply($scope.number);
  }

}]);

var mainApp2 = angular.module("mainApp2", []);
mainApp2.controller("MyController2", function($scope,  $myReuseableSrvc) {
  console.log('init B');
  $scope.multiplyValue = function() {
      $scope.result2 = $myReuseableSrvc.multiply($scope.numberSecond);
  }
});

angular.element(document).ready(function() {
    angular.bootstrap(document.getElementById("myDiv2"), ["mainApp2", "myReuseableMod"]);
});

This is a good post to read:

http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/