Why does AngularJS directive work with hardcoded values but fail with http request/response?
<p>Angular Newbie Question:</p>

<p>I have a simple AngularJS test application that shows how a controller and a directive work together. The controller sets some hardcoded values <code>aB</code> and <code>aC</code> on the scope and the directive then displays these values in HTML. It works. Here is the <a href="https://jsfiddle.net/9w3rmhdL/1/" rel="nofollow">JSFiddle</a>. The code is below. When you run it, you can see the console output is as expected:</p>

<pre><code>JS line #63: this.aB =  null
JS line #64: this.aC =  Goodbye
JS line #63: this.aB =  Hello
JS line #63: this.aC =  World
</code></pre>

<p>However, when I change the hardcoded values to ones that are retrieved from a test API, it fails. The console output is as follows:</p>

<pre><code>JS line #63: this.aB =  null
JS line #64: this.aC =  Goodbye
JS line #63: this.aB =  undefined
JS line #63: this.aC =  undefined
</code></pre>

<p>The only change I made (seen here in this new <a href="https://jsfiddle.net/saqibali75/gaj3wa6x/" rel="nofollow">JSFiddle</a>) was in the controller's <code>myFunc</code> function: I replaced the hardcoded values with the following:</p>

<pre><code>  response = $http.post('http://jsonplaceholder.typicode.com/posts',
    {
      'XXXXX': 'YYYYYYY'
    }
  )    
  self.scopeAB = response.id;
  self.scopeAC = response.id;
</code></pre>

<p>I have tested the API's response via <code>curl</code> and it is working fine. So why does the directive report the values of <code>aB</code> and <code>aC</code> as <code>undefined</code>? How do I solve this problem? I can tell that it has to do with the asynchronous nature of the HTTP call. But I don't know how to make this work correctly.</p>

<p>HTML:</p>

<pre><code>&lt;body ng-app="myApp"&gt;
  &lt;div ng-controller="MyCtrl as ctrl"&gt;
    &lt;div ng-view&gt;&lt;/div&gt;
    &lt;ul&gt;
      &lt;li&gt;{{1+1}}&lt;/li&gt;
      &lt;li&gt;&lt;my-directive a-b="null" a-c="'Goodbye'"&gt;&lt;/my-directive&gt;&lt;/li&gt;
      &lt;li&gt;&lt;my-directive a-b="ctrl.scopeAB" a-c="ctrl.scopeAC"&gt;&lt;/my-directive&gt;&lt;/li&gt;
      ab = {{ctrl.scopeAB}}, ac = {{ctrl.scopeAC}}
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>Working Javascript:</p>

<pre><code>myApp = angular.module('myApp',[]);
myApp.directive('myDirective',function(){
    return {
      restrict:'E',
      scope: {
        aB: '=',
        aC: '='
      },
      controller: 'DirectiveCtrl',
      controllerAs: 'dirCtrl',
      bindToController: true,
      template: 'aB={{dirCtrl.aB}} aC={{dirCtrl.aC}} &lt;input ng-model="dirCtrl.aB" /&gt;'
    };
  }
);

myApp.controller('DirectiveCtrl', function(){
    var self = this;
    console.log('this.aB = ', self.aB);
    console.log('this.aC = ', self.aC);
})

myApp.controller('MyCtrl', function() {
    var self = this;
    self.myFunc = function() {
      self.scopeAB = 'Hello';
      self.scopeAC = 'World';
    }();
  }
);
</code></pre>

<p><strong><em>UPDATE:</em></strong>
Claies suggested I use this <a href="http://jsfiddle.net/Lu6zzbcx/1/" rel="nofollow">JSFiddle</a>. But it won't work for me because I absolutely need the values of <code>aB</code> and <code>aC</code> to be accessible in the directive's controller. I need to vary the template based on their values. This JS Fiddle seems to show them as always undefined in there.</p>