title: Declaring objects in services in angular JS
body: <p>I was trying a code to put a value in html page from angular js controller which is injected with a service.</p>
  
  <p>I create an object in the service and add some value as property to this object. Next i read this value in the controller.</p>
  
  <p>Now what i am observing is that the name of the service and name of the object should be same, only then the value is coming properly else not.</p>
  
  <p>Following is the HTML code:-</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
       &lt;title&gt;AngularJS Services&lt;/title&gt;
       &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"&gt;&lt;/script&gt;
       &lt;script type="text/javascript" src="abc.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body ng-app="myApp"&gt;
    &lt;div ng-controller="Addition as add"&gt;
      &lt;p&gt;{{ add.num }}&lt;/p&gt;
      &lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>
  
  <p>Following is the working code:-</p>
  
  <p>abc.js</p>
  
  <pre><code>angular.module('myApp',[]);
  angular.module('myApp').factory('number',function(){
  var number={};
  number.val=10;
  return number;
  });
  
  angular.module('myApp').controller('Addition',function(number){
  
  var self=this;
  self.num=number.val;
  });
  </code></pre>
  
  <p>Following is the code which is not working:-</p>
  
  <pre><code>angular.module('myApp',[]);
  angular.module('myApp').factory('number',function(){
  var num={};
  num.val=10;
  return num;
  });
  
  angular.module('myApp').controller('Addition',function(number){
  
  var self=this;
  self.num=num.val;
  });
  </code></pre>
  
  <p>Is is mandatory that service name and the object name should be same?</p>