Help with ng-repeat and view not refreshing after http.get please

I have read so many tutorials, tried countless permutations and still cannot figure out what I am doing wrong. The view loads but never gets refreshed after the promise is returned from my factory. Have tried to create a fiddle/plunker but still learning and don’t know how to cut this down to a simpler version.

HTML (tried ng-repeat and ionic-collection

<ion-content id="device-list-content" class="fade-in">
      Device List

          <div class="card-content">
            <div class="device-content-detail"
              collection-repeat="device in p.devices"
              <div class="card-content">
                  <h1 class="md-title">
                              <i class="fa fa-crosshairs" aria-hidden="true"></i>
                            Device List

            <md-card ng-if="!isAnimated" class="card-item" ng-repeat="device in p.devices track by $index">
                        <div class="card-content">
                            <h1 class="md-title">
                                      Device List
                                        <i class="fa fa-crosshairs" aria-hidden="true"></i>{{}}
                            <div class="device-content-detail">
                                <i class="fa fa-wifi" aria-hidden="true"></i>{{device.connected}}
                                <i class="fa fa-heartbeat" aria-hidden="true"></i>{{device.last_heard}}


appControllers.controller('devicesCtrl', function ($scope,$state,$stateParams,$timeout,$mdDialog,$ionicHistory,$ionicLoading,particle,pDevices,safeparse) {
    //$scope.isAnimated is the variable that use for receive object data from state params.
    //For enable/disable row animation.
    var debug = true;
      content: 'Getting Devices',
      animation: 'fade-in',
      showBackdrop: true,
      maxWidth: 200,
      showDelay: 0

    $timeout(function () {
      pDevices.getpDevices().then(function(data) {
        $scope.p.devices = data;
        if (debug) console.log(debug + 'time out got device list: ', $scope.p.devices);
        $scope.isLoading = false;
        if (debug) console.log(debug + 'time out complete, hiding ionicLoading: ');
      }, function() {
        $scope.error = 'unable to load devices'
      }, 2000);

    $scope.initialForm = function () {
        //$scope.isLoading is the variable that use for check statue of process.
        $scope.isLoading = true;
        $scope.isAnimated =  $stateParams.isAnimated;
    };// End initialForm.
    $scope.p = {
      currentDevice: '',
      deviceId: particle.setDevice(),
      token: particle.setToken(),
      devices: [],

      getDevices: function () {
            pDevices.getpDevices().then(function(deviceList) {
              if (debug) console.log(debug + 'getDevices got device list: ', deviceList);
              $scope.p.devices =;

      // Select the current device for particle platform
      setDevice: function (deviceId) {
        if (deviceId) {
          if (debug) console.log(debug + 'setDevice', deviceId);
          $scope.p.deviceId = deviceId;
        return $scope.p.deviceId;

    showAlertDialog = function ($event) {
            controller: 'DialogController',
            templateUrl: 'confirm-dialog.html',
            targetEvent: $event,
            locals: {
                displayOption: {
                    title: "No Devices Found.",
                    content: "Unable to load Device List.",
                    ok: "Confirm"
        }).then(function () {
            $scope.dialogResult = "You choose Confirm!"
    }// End showAlertDialog.
});// End of controller Device.


appServices.factory('pDevices', function($http, localstorage) {
  root_url = ''
  var getpDevices = function() {
    return $http.get(root_url + 'devices').then(function(response){
      console.log('pDevices getpDevices: ',;
  return {
  getpDevices: getpDevices

Gets me this: