Angular: adding property in ng-controller

You are better of using a gem factory:

angular.module('gemStore', []).
factory('GemFactory', [ function() {
   var gem = { name: 'Azurite', price: 2.95 };
   return gem;
   };
 ]);

angular.module('gemStore',[]).controller("StoreController",function($scope, GemFactory){
      $scope.product = GemFactory();
  });

This way you can just dependency inject it into any controller that requires your precious beautiful gems. plus you will have a gem factory which is bound to make you filthy rich in no time.

Assign the gem property to the scope object.

(function(){
  var gem = { name: 'Azurite', price: 2.95 };
  var app = angular.module('gemStore', []);
  app.controller("StoreController",function($scope){
      $scope.product = gem;
  });
})();

You would then output the properties of 'product' in StoreController's template.

<div>
    {{product.name}}
</div>
<div>
    {{product.price}}
</div>

You could put the gem in a service also so it's not just sat there in the closure.

(function(){

  var app = angular.module('gemStore', []);
  app.controller("StoreController",function($scope, GemSvc){
      $scope.product = GemSvc.getGem();
  });

  app.service("GemSvc",function(){
      var gem = { name: 'Azurite', price: 2.95 };

      this.getGem = function () {
          return gem;
      };
  });
})();

Then in your template, i've used the ng-controller method here as you did not state how you hook up your templates to controllers.

<div ng-controller="StoreController">
    {{product.name}}
    {{product.price}}
</div>

You should maybe create it on the controller scope:

(function() {
  var app = angular.module('gemStore', []);

  app.controller("StoreController",function($scope) {
       $scope.gem = { name: 'Azurite', price: 2.95 };
  });
})();

It can now be displayed in your page with:

<div>Name: {{gem.name}}, Price: {{gem.price}}</div>

Scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events. - Angular documentation

Create a constant service in your app.js
You can put it into a real service also and access it
Example for constant service
Like following

(function(){
  var gem = { name: 'Azurite', price: 2.95 };
  var app = angular.module('gemStore', []).constant('GEM', {
    name: 'Azurite', 
    price: 2.95 
  });
  app.controller("StoreController",function($scope, GEM){
      $scope.product.name = GEM.name;
      $scope.product.price = GEM.price;
      //if you don't want to create a constant service then 
      //user directly like
      //$scope.product = gem;
  });
})();


<div>
    {{product.name}}
</div>
<div>
    {{product.price}}
</div>