Cordova: Data that is filled inside array could not populate on page

I am not able to populate data filled inside the array. My main controller front is this:

<body ng-controller="MainCtrl"> // MainCtrl controller
    <ion-nav-view animation="slide-left-right"></ion-nav-view>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/owl.carousel.min.js"></script>
</body>

the MainCtrl initially contain nothing like this:

.controller('MainCtrl', function($scope, $ionicSideMenuDelegate, $ionicPopover, $state, $timeout) {
    $scope.users = [];
$scope.devices = [];
})

Initially when i do login the controller named intro is getting called that controller calls rest & validate user & on successfully validating it does following:

.success(function(data, status, headers, config) {
            if (data.alert === 'SUCCESS'){
                var UserData = data.userdata;
                var Username = UserData.personal_information.first_name+" "+UserData.personal_information.last_name;
                var Email = UserData.username;
                var LastLogin = new Date(UserData.last_visited * 1000);
                $scope.users = [{ username: Username, email: Email, location: true, id: null, avatar: 'img/men.jpg', enabled: 'true', lastLogin: LastLogin}];

                if(data.ownteam == true) {
                    $.each(data.ownteamdata, function( index, value ){
                        var TeamId = value.team_id;
                        var TeamName = value.team_name;
                        var Status = value.role;
                        var surveyArray = {id : TeamId, name :TeamName, icon: 'ion-document-text', status : Status, color : Color};
                        $scope.devices.push(surveyArray);
                    });
                }

now when i console the array it shows me the data inserted. then i move to dashboard page where the data of devices array need to be polupated & shown like:

        <div ng-repeat="device in devices | filter: { featured: true}">
        <div class="padding-horizontal">
            <div class="item item-icon-left" on-tap="deviceTap('router.device', device)">
                <i class="icon" ng-class="device.icon"></i>
                {{ device.name }}
                <span class="badge" ng-class="device.color">
                {{ device.status }}
                </span>
            </div>
        </div>
    </div>

but it is not showing the data to me in the page??? is there something i m missing?

You're trying to filter the devices where featured = true

<div ng-repeat="device in devices | filter: { featured: true}">

but you don't seem to have that element in your object:

var surveyArray = {
    id : TeamId, 
    name :TeamName, 
    icon: 'ion-document-text', 
    status : Status, 
    color : Color
};

Another problems could be the fact that you're maybe - trying to access the array from 2 different controllers.

I would suggest to check your console in chrome (F12) and use some sort of debug.

UPDATE:

One approach if you want to share data between controllers is to use a shared service, like a session, so you can move of the login for the login and validation there (clean controllers).

You can have a look at this plunker.

In app.services.js you will find a service called userAccountService. 

(function () {

    'use strict';

    var services = angular
        .module('app.services', [])
        .factory('userAccountService', userAccountService);

    userAccountService.$inject = ['$q'];

    function userAccountService($q) {

        var service = {
            users: [],
            devices: [],
            logIn: logIn,
        };

        return (service);

        function logIn(username, password)
        {
            var deferred = $q.defer();

            this.users.push({username: username});
            this.devices = [{name: 'android'}, {name: 'iphone'}];

            deferred.resolve({users: this.users, devices: this.devices });

            return deferred.promise;

        }
    };

})();

It will be responsible for the log-in an for sharing data between controllers ... and other modules. It is a singleton.

This service contains 2 arrays: users and devices:

var service = {
    users: [],
    devices: [],
    logIn: logIn
};

The login method will, presumably, authenticate the user through an http call and will populate the shared members: users and devices.
(I've used promises there to match your $http call).

Now you can have a look at the app.controller.js file where my controllers are defined.
They depend on userAccountService.

view1Controller is the starting point and it is in charge for the login:

$scope.login = function()
{
  userAccountService.logIn('username', 'password')
    .then(function(result){
        $scope.users = result.users,
        $scope.devices = result.devices

    })
    .catch(function(reason){
      console.log(reason);
    });
  $state.go('view2');
}

if the login is successful it will populate the two local members to be displayed in the page. 

<div ng-repeat="device in devices">
    <div class="padding-horizontal">
        <div class="item item-icon-left">
            {{ device.name }}
            </span>
        </div>
    </div>
</div>

Same thing happens with view2. Now we don't need to login again; we can simply read the shared member of our service:

.controller('view2Controller', function($scope, userAccountService) {

  $scope.users = [];
  $scope.devices = [];

  function init()
  {
      $scope.users = userAccountService.users;
      $scope.devices = userAccountService.devices;
  }

  init();

})