Angular & Ionic, HTTP Get not working in real device IOS

Question

I have problem in my app , when I run the app in local host it's working without problem and I can see the channel list but when I try to test the app by physical device it doesn't show anything. I think the problem comes from the method that I'm using to send json data through http.

(function () {
'use strict';

angular.module('testApp').controller('ChannelCtrl', ['$state', 'testApi', ChannelCtrl]);

function ChannelCtrl($state, testApi) {
    var vm = this;

myscreenApi.getChannels().then(function(data){
         vm.channels = data;
     });

    vm.selectLeague = function(id){
        testApi.setChannelId(id);
        $state.go("app.video");
    }

};
})();

and this my function to get channeldata

function getChannels() {
        var deferred = $q.defer(),
            cacheKey = "leagues",
            ChannelsData = null;

        if (ChannelsData) {
            console.log("Found data inside cache", ChannelsData);
            deferred.resolve(ChannelsData);
            $window.alert("From Cache");
        } else {
            $http.get("http://example.com/api/videos/getchannels")
                .success(function(data) {
                    console.log("Received data via HTTP");
                    self.leaguesCache.put(cacheKey, data);
                    $window.alert("From HTTP");
                    deferred.resolve(data);
                })
                .error(function(dataerr) {
                    console.log("Error while making HTTP call.");
                    $window.alert("Error baba daram " + dataerr);
                    deferred.reject();
                });
        }
        return deferred.promise;
    }

when i send data with JSON.parse() , it works right.

vm.channels = JSON.parse('[{"Name":"MyScreen News","ID":46,"Thumbnail":"CB46.jpg","Videos":null}]');

The overall, I used the ASP.NET Web API which is send data by JSON. The App works well in our desktop however the running application can not retrieve data from our host. Moreover, when I inject data in program directly it works in both platform. In addition the ionic config file presented below:

  <content src="index.html"/>
  <access origin="*"/>
  <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="BackupWebStorage" value="none"/>
  <feature name="StatusBar">
    <param name="ios-package" value="CDVStatusBar" onload="true"/>
  </feature>

That's all. ;)

Answer 1

If you're using one of the latest versions of cordova you might have to install the cordova plugin whitelist:

cordova plugin add cordova-plugin-whitelist

If you're using IIS Express you might find a few problems.
I've detailed some more explanation here.

Answer 2

Had exactly the same problem while working on a test server. It seems that iOS 9 added a layer of security to their applications by not allowing an app to connect to a server through HTTP rather than HTTPS.

To fix this, you have to add This Patch to your info.plist iOS build.

Remember that this solution is INSECURE and shouldn't be used in production web services.