Angularjs Error in loading external jsonfile from server

I am trying to load json file from server .Here is my services.js file 

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

/**
 * A simple example service that returns some data.
 */
.factory('Friends', function($http) {

  var friends;
 //here is the code for server access
  $http.get('http://wwww.root5solutions.com/ionictest/get.json').then(function(msg){
      console.log("console output"+msg.data);
      friends=msg.data;
      console.log("from server"+friends.data);
  });

  return {
    all: function() {
      return friends;
    },
    get: function(friendId) {

      return friends[friendId];
    }
  }
});

But its not worked properly.Here is my console message

XMLHttpRequest cannot load http://www.root5solutions.com/ionictest/get.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

you have to whitelist that URL

try this

.config(function($sceDelegateProvider) {

    $sceDelegateProvider.resourceUrlWhitelist([
        // Allow same origin resource loads.
        'self',
        // Allow loading from our other assets domain.  Note there is a difference between * and **.
        'http://wwww.root5solutions.com/ionictest/**',
    ]);
})

I have also faced the same problem.I am sure it will resolve your problem,

For Windows... create a Chrome shortcut on your desktop > Right-clic > properties > Shortcut > Edit "target" path : > "C:\Program Files\Google\Chrome\Application\chrome.exe" --args --disable-web-security

NOTE: After setting this exit from chrome and then open

All this problem beacuse i tested only using browser.When tesing on device/emulator its working perfect.There is no need of additional coding to overcome this problem.