Data Binding not working on JSON in AngularJS

Question

 this.getData = function () {
    $http.get("data/samples.json").then(function(d) {
        console.log(angular.fromJson(d.data.cards)[0].title);
        return angular.fromJson(d.data.cards);
    });
};
this.cards = this.getData();

It prints the proper value to the console.

<p>{{main.cards[0].title}}</p>

It doesn't display anything, why?

Answer 1

The returned object is async, and not returning the result (can't return within a callback). Try this:

 this.getData = function () {
    $http.get("data/samples.json").then(function(d) {
        this.cards = angular.fromJson(d.data.cards);
    });
};

Answer 2

Try this:

var me = this;
this.getData = function () {
    $http.get("data/samples.json").then(function(d) {
        console.log(angular.fromJson(d.data.cards)[0].title);
        me.cards = angular.fromJson(d.data.cards);
    });
};