AngularJS bind value into data attribute

Looks like there isn't a problem after all. The template is parsed and my controller was downloading the data, but when the template was being parsed data wasn't there yet. And the directive I put needs the data to be there os in the mean time its just picking up empty macro data.

The way that I solved this was with the $watch command:

$scope.$watch('ready', function() {
  if($scope.ready == true) {
    //now the data-id attribute works
  }
});

Then when the controller has loaded all the ajax stuff then you do this:

$scope.ready = true;

It looks like to me what you are really after is a Promise / Deferred:

// for the purpose of this example let's assume that variables '$q' and 'scope' are
// available in the current lexical scope (they could have been injected or passed in).

function asyncGreet(name) {
  var deferred = $q.defer();

  setTimeout(function() {
    // since this fn executes async in a future turn of the event loop, we need to wrap
    // our code into an $apply call so that the model changes are properly observed.
    scope.$apply(function() {
      if (okToGreet(name)) {
        deferred.resolve('Hello, ' + name + '!');
      } else {
        deferred.reject('Greeting ' + name + ' is not allowed.');
      }
    });
  }, 1000);

  return deferred.promise;
}

var promise = asyncGreet('Robin Hood');
promise.then(function(greeting) {
  alert('Success: ' + greeting);
}, function(reason) {
  alert('Failed: ' + reason);
);

Edit: right, here's a simple example of using a Promise with a Controller and binding:

var app = angular.module('myApp', []);

app.controller('MyCtrl', function($scope, $q) {
    var deferredGreeting = $q.defer();
    $scope.greeting = deferredGreeting.promise;

    /**
     * immediately resolves the greeting promise
     */
    $scope.greet = function() {
        deferredGreeting.resolve('Hello, welcome to the future!');
    };

    /** 
     * resolves the greeting promise with a new promise that will be fulfilled in 1 second
     */
    $scope.greetInTheFuture = function() {
        var d = $q.defer();
        deferredGreeting.resolve(d.promise);

        setTimeout(function() {
            $scope.$apply(function() {
                d.resolve('Hi! (delayed)');
            });
        }, 1000);
    };
});​

Working JSFiddle: http://jsfiddle.net/dain/QjnML/4/

Basically the idea is that you can bind the promise and it will be fulfilled once the async response resolves it.