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

ionic-v1
1

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

      <md-card>
        <ion-content>
          <div class="card-content">
            <div class="device-content-detail"
              collection-repeat="device in p.devices"
              collection-item-height="136px"
              collection-item-width="100%">
              <div class="card-content">
                  <h1 class="md-title">
                          <span>
                              <i class="fa fa-crosshairs" aria-hidden="true"></i>
                            Device List
                          </span>
                  </h1>
              {{device.name}}
            </div>
          </div>
        </ion-content>
      </md-card>
</ion-content>


        <md-list>
            <md-card ng-if="!isAnimated" class="card-item" ng-repeat="device in p.devices track by $index">
                    <md-card-content>
                        <div class="card-content">
                            <h1 class="md-title">
                                    <span>
                                      Device List
                                        <i class="fa fa-crosshairs" aria-hidden="true"></i>{{device.name}}
                                    </span>
                            </h1>
                            <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}}
                            </div>
                        </div>
                    </md-card-content>
            </md-card>

Controller

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;
    $ionicLoading.show({
      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 particle.io device list: ', $scope.p.devices);
        $scope.isLoading = false;
        if (debug) console.log(debug + 'time out complete, hiding ionicLoading: ');
        $ionicLoading.hide();
      }, function() {
        $scope.p.showAlertDialog($event);
        $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.$watch('p');
    $scope.p = {
      currentDevice: '',
      deviceId: particle.setDevice(),
      token: particle.setToken(),
      devices: [],

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

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

    showAlertDialog = function ($event) {
        $mdDialog.show({
            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.
    $scope.initialForm();
});// End of controller Device.

Factory

appServices.factory('pDevices', function($http, localstorage) {
  root_url = 'https://api.particle.io/v1/'
  var getpDevices = function() {
    return $http.get(root_url + 'devices').then(function(response){
      console.log('pDevices getpDevices: ', response.data);
      return response.data;
      });
    };
  return {
  getpDevices: getpDevices
  };
});

Gets me this:
image