javascript - Using json to write iframe links in Ionic Framework -

i'm using ionic starter tabs example app test ionic framework. there json list populates chats page. want specific map links sent via json, run on iframe. hardcoding single link works (checked on devices , map displayed) i'm unable use angjs variable source.

<iframe width="500" height="400" ng-src="{{chats.map}}"></iframe> 

is wrong code or how apply iframes in ionic angular way?

chat controller

.controller('chatsctrl', function($scope, chats) {    $scope.chats = chats.all();   $scope.remove = function(chat) {     chats.remove(chat);   } })  .controller('chatdetailctrl', function($scope, $stateparams, chats) {   $scope.chat = chats.get($stateparams.chatid); }) 

json file (services.js)

angular.module('starter.services', [])  .factory('chats', function() {   // might use resource here returns json array    // fake testing data   var chats = [{     id: 0,     name: 'ben sparrow',     lasttext: 'you on way?',     face: 'https://pbs.twimg.com/profile_images/514549811765211136/9sgauhey.png',     map: 'https://www.google.com/maps/d/embed?mid=zlcyvs6i4tfm.ky2_d9mpzxhg'   }, {     id: 1,     name: 'max lynx',     lasttext: 'hey, it\'s me',     face: 'https://avatars3.githubusercontent.com/u/11214?v=3&s=460',     map: 'https://www.google.com/maps/d/embed?mid=zlcyvs6i4tfm.ky2_d9mpzxhg'   },{     id: 2,     name: 'adam bradleyson',     lasttext: 'i should buy boat',     face: 'https://pbs.twimg.com/profile_images/479090794058379264/84tkj_qa.jpeg',     map: 'https://www.google.com/maps/d/embed?mid=zlcyvs6i4tfm.ky2_d9mpzxhg'   }, {     id: 3,     name: 'perry governor',     lasttext: 'look @ mukluks!',     face: 'https://pbs.twimg.com/profile_images/598205061232103424/3j5huxmy.png',     map: 'https://www.google.com/maps/d/embed?mid=zlcyvs6i4tfm.ky2_d9mpzxhg'   }, {     id: 4,     name: 'mike harrington',     lasttext: 'this wicked ice cream.',     face: 'https://pbs.twimg.com/profile_images/578237281384841216/r3ae1n61.png',     map: 'https://www.google.com/maps/d/embed?mid=zlcyvs6i4tfm.ky2_d9mpzxhg'   }];    return {     all: function() {       return chats;     },     remove: function(chat) {       chats.splice(chats.indexof(chat), 1);     },     get: function(chatid) {       (var = 0; < chats.length; i++) {         if (chats[i].id === parseint(chatid)) {           return chats[i];         }       }       return null;     }   }; }); 

it easy way, clicks on link or item or whatever bound click event to, when clicked fire function passes in index, have function run window.open(maplink, '_blank'). open map, or if use '_system' instead of blank open maps.google.com links in google maps app , if on iphones make link maps.apple.com in link use apple maps example:

<div ng-click="seemap($index)">see map</div>       $scope.seemap = function ($index) {             if ($scope.stopdata[$index].maplink == "http://maps.google.com/?q=0.0000000,-0.0000000") {                 $scope.showalert();             } else if (ionic.platform.isios() === true) {                 $scope.map = $scope.stopdata[$index].maplink.replace("http://maps.google", "http://maps.apple");                 window.open($scope.map, '_system');             } else {                 $scope.map = $scope.stopdata[$index].maplink;                 window.open($scope.map, '_system');             }          };