AngularJS data not showing up on page

Question

I have a little trouble with this AngularJS page, it is not showing the data that it should.

I just recently started to work with angular, so a pointer, or an advise is welcomed.

Here is the Factory, and the Controller:

var app = angular.module('mpDataApp', [])
.controller('MpMapController', MpMapController)
.factory('GetMpData', GetMpData)

function GetMpData($http) {
    var data = [];
    return {
        getData: function () {
            return $http.get('MpWatch/GetMpData').success(function (data, status, header, config) {
            }).then(function (results) {
                data = ParseMpResults(results.data.d);
                return data;
            })
        },
    };
}

function MpMapController(GetMpData) {
    GetMpData.getData().then(function (data) {
        angular.extend(this, {
            mpData: data,
        });
    });
};

And here is the markup:

//ng-app declared higher in the markup    
<div>
        <div ng-controller="MpMapController as mp">
            <ul >
                <li>
                    Number of records: {{mp.mpData.length}}
                </li>
                <li ng-repeat="mps in mp.mpData" >
                    <p>{{mps.deviceId}}</p>
                </li>
            </ul>
        </div>
    </div>

And the problem is, during debug a can see that "mpData" has the correct data as what it should be showing. But the page is not displaying it, and no errors displayed. In Visual Studio, i can hover over "mpData" in the markup and it shows the data is present.

Yet it's not displayed on the page. Thanks in advance for any help, advise, or a pointer.

Peter

Update:

Here is what did the trick, thank you for all the answers, it helped me get it right.

function GetMpData($http) {
    return {
        getData: function () {
            return $http.get('/MpWatch/GetMpData')
                  .then(function (response) {
                      return {
                          data: ParseMpResults(response.data.d),
                      }
                  });
        },
    };
};

function MpMapController(GetMpData) {
    var mp = this;
    var self = this;
    GetMpData.getData().then(function (mpResults) {
        angular.extend(self, {
            mpData: mpResults.data,
        })
    });
};

Data show on the page now properly.

Answer 1

var app = angular.module('mpDataApp', [])
  .controller('MpMapController', MpMapController)
  .factory('GetMpData', GetMpData)

function GetMpData($http) {
  var data = [];
  return {
    getData: function() {
      return $http.get('MpWatch/GetMpData');
    },
  };
}

function MpMapController(GetMpData) {
  var mp = this;
  mp.mpData = [];
  GetMpData.getData().then(function(data) {
    mp.mpData = data

  });
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mpDataApp">
  <div ng-controller="MpMapController as mp">
    <ul>
      <li>
        Number of records: {{mp.mpData.length}}
      </li>
      <li ng-repeat="mps in mp.mpData">
        <p>{{mps.deviceId}}</p>
      </li>
    </ul>
  </div>
</div>

Answer 2

Actually the problem is that when your factory called, it is not waiting till response come and then assign to myData, and compiler continues their execution to moving on view at that time that variable myData will blank and after response come from server you can see the data inside that variable but not at that time when views load it.

So the best practice is that you have to define promises at there in you factory or services.

so just return http call like this from factory.

 return $http.get('MpWatch/GetMpData');

and utilize promises to wait till response come from server and you can poppulate data inside views properly

Answer 3

Try the below one. I have changed your service to return the promise since the syntax you had is wrong.

You should have the ParseMpResults method at your controller.

function GetMpData($http) {
    var data = [];
    return {
        getData: function () {
            return $http.get('MpWatch/GetMpData');
        },
    };
}

function MpMapController(GetMpData) {
    GetMpData.getData().then(function (results) {
        angular.extend(this, {
            mpData: ParseMpResults(results.data.d),
        });
    });
};