Display changing's value in real time (Angular, JS, OOP)
<p>So, Right now I'm practicing JS/OOP/Angular via creating some kind of light-text-browser-game :) Got stuck in the simple situation (like always). I simplify my code a bit, here it is: <a href="https://jsfiddle.net/gjgjc3fx/1/" rel="nofollow noreferrer">https://jsfiddle.net/gjgjc3fx/1/</a>. So I've just created a 'class' Hero using factory:</p>

<pre><code>angular.module('myGame', [])
  .factory('Hero', function() {
    function Hero(name, damage) {
      this.name = name;
      this.damage = damage;
    }
    Hero.prototype = {
      talk : function() {
        alert('Hi, my name is: ' + this.name + ', my current damage is: ' + this.damage);
    },
      addDamage : function(damage) {
        this.damage += damage;
        console.log(this.damage);
      }
    }

    return Hero;
  })
</code></pre>

<p>and then use it in controller:</p>

<pre><code>  .controller('myGameCtrl', function($scope, Hero) {
    var am = new Hero('AntiMage', 70);

    $scope.currentDamage = am.damage;
    $scope.hi = function() {
      am.talk();
    }
    $scope.add50Dmg = function() {
      am.addDamage(50);
    }
   })
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div ng-app='myGame' ng-controller='myGameCtrl'&gt;
  &lt;div&gt;{{currentDamage}}&lt;/div&gt;
  &lt;button ng-click='add50Dmg()'&gt;Add 50 damage&lt;/button&gt;
  &lt;div ng-click='hi()'&gt;Hi&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>The question is - what am I suppose to fix if I wanna see in the <code>&lt;div&gt;{{currentDamage}}&lt;/div&gt;</code> changing damage in real time? I mean if I click on button it will add 50 damage and I can see change in alert's window, but the <code>&lt;div&gt;{{currentDamage}}&lt;/div&gt;</code> stay the same (70) all the way. Any help and advices will be great.</p>