Ionic/AngularJs : How to show newest items on the list when reloading view

Im building a mobile application with Cordova and AngularJs using the Ionic framework, and retrieving the data using a Restfull Api on my wordpress website.

My problem is that when i delete a post or add a new post in Wordpress, and after reloading the application on my navigator, or when i close and reopen the application on my Android emulator, the view is not reloading. I tried to disable the cache on the view, but the problem is still there.

Here is my app.js :

angular.module('starter', ['ionic','ngCordova', 'starter.services', 'starter.controllers'])

.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            // org.apache.cordova.statusbar required
            StatusBar.styleDefault();
        }
    });
})

.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {
    $stateProvider

        .state('app', {
            url: "/app",
            abstract: true,
            templateUrl: "templates/menu.html",
            controller: 'AppCtrl'
        })

        .state('app.latest_posts', {
            url: "/latest_posts/:categoryId",
            views: {
                'menuContent': {
                    templateUrl: "templates/latest_posts.html",
                    controller: 'LatestPostsCtrl'
                }
            }
        })

        .state('app.single', {
            url: "/single/:postId",
            views: {
                'menuContent': {
                    templateUrl: "templates/single.html",
                    controller: 'SingleCtrl'
                }
            }
        });
    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/app/latest_posts/15');
});

My controllers.js :

angular.module('starter.controllers', [])

.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
})

.controller('LatestPostsCtrl', function($scope,$stateParams,$http,Posts,$window) {
    $scope.posts=[];
    $scope.categoryId=$stateParams.categoryId;
    $scope.page=1;
    $scope.loadMore = function() {
        $http.get('http://example.com/api/get_category_posts/?category_id='+$scope.categoryId+'&json_unescaped_unicode=1&count=8&page='+$scope.page)
        .success(function(items) {
            $scope.posts = $scope.posts.concat(items.posts);
            $scope.$broadcast('scroll.infiniteScrollComplete');
            $scope.category_name=items.category['title'];
            if(items.category['title']=='slide')
                $scope.category_name='آخر الأخبار';
            $scope.page +=1;
        })
        .error(function(data, status, headers, config) {
            alert('No Connexion');
        })
        .finally(function() {
            $scope.$broadcast('scroll.refreshComplete');
        });
    };

})

.controller('SingleCtrl',function($scope,$stateParams,$http,Post,$cordovaSocialSharing) {
    $http.get('http://example.com/api/get_post/?id='+$stateParams.postId+'&json_unescaped_unicode=1')
    .success(function(items) {
        $scope.data = items;
    })
    .error(function(data, status, headers, config) {
        alert('No Connexion');
    });

    $scope.shareAnywhere = function() {
        $cordovaSocialSharing.share("...", "...", ...", "...");
    }
})

And my view:

<ion-view view-title="{{category_name}}" class="posts-view" >
    <ion-content>
        <ion-list class="list card posts">
            <ion-item ng-repeat="post in posts" href="#/app/single/{{post.id}}" class="repeated-item">
                <span class="thumb">
                    <img ng-src="{{post.thumbnail_images['barlamane-single-post-thumb'].url}}" />
                </span>
                <span class="title" ng-bind-html="post.title"></span>
            </ion-item>
        </ion-list>
        <ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll>
    </ion-content>
</ion-view>

Thx for the help

This occurs because the view is not refreshed by itself.

You have several options to get what you need, one with a pull to refresh is widely used in native or hybrid applications.

pull to refresh

Besides a touch to your application. Or use the properties of ionic views is for you.

ion-view directive

Basically you can handle that occurs when entering for the first time, when he turns or before leaving. If you delete a value and want to refresh your view with the new actual data, we recommend using the pull to refresh and

$ionicView.beforeEnter

You can use the $ionicView.enter event in order to reload your posts like so:

$scope.$on('$ionicView.enter', function () {
    console.log('when the view is loaded!');

    // Reload your posts here...
});

I don't know what your UX is like, but the suggestion made by @sioesi is a nice, native approach to it.