title: AngularJs ng-href dynamic link with scope not updating/working
body: <p>I am having a problem where an  tag with an ng-href tag link with a scope parameter inside of it does update when the scope changes. I read in this answer (<a href="https://stackoverflow.com/questions/21303706/why-does-the-directive-ng-href-need-while-other-directives-dont">Why does the directive ng-href need {{}} while other directives don&#39;t?</a>) that ng-href uses $observe which should change ng-href when the scope value is changed.</p>
  
  <p>Here is the html links in question. It is has two buttons to change the year, a p tag to show the year (id=yearp), and a button for each month (with the links that are not working properly)</p>
  
  <pre><code>&lt;button id="left" style="display:inline;"&gt;left &lt;/button&gt;
  &lt;p id="yearp" style="display:inline;"&gt; {{curyear}} &lt;/p&gt;
  &lt;button id="right" style="display:inline;"&gt; right &lt;/button&gt;&lt;br/&gt;
  
  &lt;a ng-href="#calendar/month/{{curyear}}-01-01"&gt;&lt;button style="display:inline;"&gt; January &lt;/button&gt;&lt;/a&gt;
  &lt;a ng-href="#calendar/month/{{curyear}}-02-01"&gt;&lt;button style="display:inline;"&gt; February &lt;/button&gt;&lt;/a&gt;
  &lt;a ng-href="#calendar/month/{{curyear}}-03-01"&gt;&lt;button style="display:inline;"&gt; March &lt;/button&gt;&lt;/a&gt;
  &lt;a ng-href="#calendar/month/{{curyear}}-04-01"&gt;&lt;button style="display:inline;"&gt; April &lt;/button&gt;&lt;/a&gt;
  &lt;a ng-href="#calendar/month/{{curyear}}-05-01"&gt;&lt;button style="display:inline;"&gt; May &lt;/button&gt;&lt;/a&gt;
  &lt;a ng-href="#calendar/month/{{curyear}}-06-01"&gt;&lt;button style="display:inline;"&gt; June &lt;/button&gt;&lt;/a&gt;
  &lt;a ng-href="#calendar/month/{{curyear}}-07-01"&gt;&lt;button style="display:inline;"&gt; July &lt;/button&gt;&lt;/a&gt;
  &lt;a ng-href="#calendar/month/{{curyear}}-08-01"&gt;&lt;button style="display:inline;"&gt; August &lt;/button&gt;&lt;/a&gt;
  &lt;a ng-href="#calendar/month/{{curyear}}-09-01"&gt;&lt;button style="display:inline;"&gt; September &lt;/button&gt;&lt;/a&gt;
  &lt;a ng-href="#calendar/month/{{curyear}}-10-01"&gt;&lt;button style="display:inline;"&gt; October &lt;/button&gt;&lt;/a&gt;
  &lt;a ng-href="#calendar/month/{{curyear}}-11-01"&gt;&lt;button style="display:inline;"&gt; November &lt;/button&gt;&lt;/a&gt;
  &lt;a ng-href="#calendar/month/{{curyear}}-12-01"&gt;&lt;button style="display:inline;"&gt; December &lt;/button&gt;&lt;/a&gt;
  </code></pre>
  
  <p>And the angular controller for this page looks like this</p>
  
  <pre><code>App.controller('yearController', function($scope){
      var cdt = new Date();
      $scope.curyear = cdt.getFullYear();
      $("#left").click(function(){
          $scope.curyear = $scope.curyear - 1;
          $("#yearp").text($scope.curyear);
      });
      $("#right").click(function(){
          $scope.curyear = $scope.curyear + 1;
          $("#yearp").text($scope.curyear);
      });
  });
  </code></pre>
  
  <p>Now pressing the buttons prev and next correctly change the $scope.curyear and is updated in the yearp tag, but pressing any of the links will still take me to (if pressing January) "calendar/month/2015-01-01" regardless of what $scope.curyear is. Anyone have any input on why this is happening and how to fix it?</p>
  
  <p>Thanks in advance!</p>