Image at data directory not shown

I've download a image from server and save to my data directory by cordova-file and cordova-file-transfer plugin. The file downloaded and saved successfully. But it will not shown in my img with ng-src pointed to my data directory.

For example:

$scope.testFileDownload = function() {
  var url = "http://www.gajotres.net/wp-content/uploads/2015/04/logo_radni.png";
  var filename = url.split("/").pop();
  var targetPath = cordova.file.dataDirectory + filename;

  $cordovaFileTransfer.download(url, targetPath, {}, true).then(function (result) {
    console.log(result);
    $scope.image = targetPath;
  }, function (error) {
    console.log(error);
  }, function (progress) {
    console.log(progress);
  });

Html:

<img ng-src="{{image}}">
<button class="button button-full button-positive" ng-click="testFileDownload()">Test download</button>

If I set the image to a remote url, it will be fine. But it won't work if I set it to my local data path like:

file:///Users/user/Library/Developer/CoreSimulator/Devices/81B513B7-AE34-4911-A9C9-57E293957BEC/data/Containers/Data/Application/F3D451DB-8EB6-447A-852A-38BCA1B169A9/Library/NoCloud/logo_radni.png