title: Use ng-model in href
body: <p>Angular is new to me. I try to make a link which contains a dynamic <code>href</code> attribute.</p>
  
  <p>So far, I read that using <code>ng-href</code> instead of <code>href</code> was a good practice. But, when I try this : </p>
  
  <pre><code>&lt;a target="_blank" data-ng-href="{{myUrl}}"&gt;Follow this URL&lt;/a&gt;
  </code></pre>
  
  <p><em>(I also tried without the curly brackets)</em></p>
  
  <p>The href value does not take the value that I put in the controller : </p>
  
  <pre><code>function (data) {
    console.log("data : %o", data);
    console.log("url : "+data.url);
    $scope.myUrl =  data.url;
  }
  </code></pre>
  
  <p>Am I doing something wrong?</p>
  
  <p>Here is the value of data as shown is the console : </p>
  
  <pre><code>data : Object
    requestTokenId: 3405
    url: "https://api.twitter.com/oauth/authorize?oauth_token=TBqMIpdz[...]"
    __proto__: Object
  </code></pre>
  
  <p><strong>More background :</strong> </p>
  
  <p>I want to create a "twitter authorization" modal : </p>
  
  <pre><code>&lt;div data-ng-controller="myController"&gt;
  
  &lt;!-- 
  Some HTML elements on which data-binding works.
  --&gt;
  
  &lt;div class="modal fade" id="authorizationTwitterModal"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;span
              class="sr-only"&gt;Close&lt;/span&gt;&lt;/button&gt;
          &lt;h4 class="modal-title"&gt;Authorization&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;ol&gt;
            &lt;li&gt;Connect to your account&lt;/li&gt;
            &lt;li id="liAuthorizationTwitterURL"&gt;&lt;a target="_blank" ng-href="{{myUrl}}"&gt;Follow this URL&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;Authorize Ambasdr&lt;/li&gt;
            &lt;li&gt;Copy/Paste the authorization code here :&lt;/li&gt;
          &lt;/ol&gt;
          &lt;p class="text-center"&gt;
            &lt;input id="verifier" name="value" type="text"&gt;
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Then, when the user wants to authorize twitter, I call my server, which calls twitter then give me the URL that I want to place into the href:</p>
  
  <pre><code>$scope.addTwitterAccount = function(brandId) {
    console.log("addTwitterAccount");
    var popup = wait("Authorization");
    //$scope.myUrl =  'http://www.google.fr'; &lt;- This change works!
    $.doPost("/api/request_token/",
      {
        socialMedia: 'TWITTER'
      },
      function (data) {
        console.log("data : %o", data);
        console.log("url : "+data.url);
        $scope.myUrl =  data.url; // &lt;- This change does not work!
      }
    );
  };
  </code></pre>