title: Angular how to make a dynamic variable
body: <p>I have a view that I want the view the to get newly updated price everytime I click the change price button. I used a service that stores the newPrice that gets his value from the priceModel. so far I can't get the price to updated in the DOM when i press the button.</p>
  
  <p>this is my html</p>
  
  <pre><code>    &lt;body ng-app="my-app"&gt;
    &lt;div ng-controller="my-controller"&gt;
      &lt;h1&gt;Products&lt;/h1&gt;
      &lt;input type="text" ng-model="priceModel" /&gt;
      &lt;br/&gt;
      &lt;button type="button" ng-click="changePrice()"&gt;Change Price&lt;/button&gt;
    &lt;/div&gt;
    &lt;div ng-controller='priceController'&gt;
      Price {{price}}
    &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>this is my javascript</p>
  
  <pre><code>    var app = angular.module('my-app', [])
  
  .controller("my-controller", function($scope, Products) {
  
    var newPrice = '';
  
    $scope.changePrice = function(){
      newPrice = $scope.priceModel;
      Products.price(newPrice);
    }
  
  })
  
  .controller('priceController', function(Products, $scope){
    $scope.price = Products.price();
  })
  
  .service('Products', function(){
  
    this.price = function(newPrice){
      return newPrice;
    };
  
  })
  </code></pre>
  
  <p><a href="http://codepen.io/candoa/pen/aOMGOx" rel="nofollow"><strong>MY CODEPEN</strong></a></p>