title: how to popup profile picture in ionic
body: <p>I am new to ionic.I am creating a app with user list i have succesfully populated  users list.but i  want to popup particular users profile picture whenever i click on picture. Like whatsapp popup window.
  i am unable to do it.following is my code.</p>
  
  <p>app.js</p>
  
  <pre><code>angular.module('shoppingPad', ['ionic','shoppingPad.controller', 'shoppingPad.service'])
  
  .run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
      if(window.cordova &amp;&amp; window.cordova.plugins.Keyboard) {
  
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
  
      }
      if(window.StatusBar) {
        StatusBar.styleDefault();
      }
    });
  })
    .config(function($stateProvider, $urlRouterProvider) {
  
      $stateProvider
  
        // setup an abstract state for the tabs directive
        .state('tab', {
          url: '/tab',
          abstract: true,
          templateUrl: 'templates/tabs.html'
        })
  
        // Each tab has its own nav history stack:
  
        .state('tab.dash', {
          url: '/dash',
          views: {
            'tab-dash': {
              templateUrl: 'templates/tab-dash.html',
              controller: 'DashCtrl'
            }
          }
        })
  
        .state('tab.chats', {
          url: '/chats',
          views: {
            'tab-chats': {
              templateUrl: 'templates/chat.html',
              controller: 'ChatCtrl'
            }
          }
        })
        .state('tab.chat-details', {
          url: '/chats/:chatId',
          views: {
            'tab-chats': {
              templateUrl: 'templates/chat-details.html',
              controller: 'ChatDetailCtrl'
            }
          }
        })
        .state('tab.groups',{
          url:'/groups',
          views: {
            'tab-chats':{
              templateUrl:'templates/groups.html',
              controller:'groupCtrl'
            }
          }
        })
        .state('tab.newGroups',{
          url:'/new',
          views: {
            'tab-chats':{
              templateUrl:'templates/newGroup.html'
            }
          }
        });
      // if none of the above states are matched, use this as the fallback
      $urlRouterProvider.otherwise('/tab/chats');
  
    });
  </code></pre>
  
  <p>controller.js:</p>
  
  <pre><code>angular.module('shoppingPad.controller', [])
  
    .controller('DashCtrl', function($scope) {})
  
    .controller('ChatCtrl', function($scope, Contents) {
  
  
      //$scope.contents = Contents.query();
      $scope.contents = Contents.all();
      $scope.remove = function(chat) {
        Contents.remove(chat);
      };
    })
  
    .controller('ChatDetailCtrl', function($scope, $stateParams, Contents, $ionicPopup) {
      alert('details');
   //   $scope.contents = Contents.get({content_id: $stateParams.content_id});
   //alert($stateParams.content_id);
      $scope.content = Contents.get($stateParams.chatId);
      alert($stateParams.chatId);
      alert('data');
      $scope.showPopup=function(){
        alert('alertpopup');
       var alertPopup=$ionicPopup.alert({
         title:'hey',
         templateUrl:'templates/chat-details.html'
       });
        alertPopup.then(function(res){
          console.log('popup');
  
        });
      };
  
    })
    .controller('groupCtrl',function($scope,Groups){
      $scope.groups=Groups.group();
    });
  </code></pre>
  
  <p>chatServices.js</p>
  
  <pre><code>angular.module('shoppingPad.service',['ngResource']).
    factory('Contents',function() {
      //return $resource('http://54.86.64.100:3000/api/v1/content/content-info');
  
      var contents = [{
        id: 0,
        name: 'Ben Sparrow',
        lastText: 'You on your way?',
        face: 'img/ben.png'
      }, {
        id: 1,
        name: 'a',
        lastText: 'Hey, it\'s me',
        face: 'img/007.gif'
      }, {
        id: 2,
        name: 'b',
        lastText: 'I should buy a boat',
        face: 'img/ionic.png'
      }, {
        id: 3,
        name: 'c',
        lastText: 'Look at my mukluks!',
        face: 'img/profile-no-photo.png'
      }, {
        id: 4,
        name: 'd',
        lastText: 'This is wicked good ice cream.',
        face: 'img/profile-unknown-male.png'
      }];
  
      return {
        all: function() {
          return contents;
        },
        remove:function(content){
          contents.splice(contents.indexOf(content),1);
        },
        get:function(chatId) {
          for (var i = 0; i &lt; contents.length; i++) {
            if (contents[i].id === parseInt(chatId)) {
              return contents[i];
            }
          }
          return null;
        }
      };
    });
  </code></pre>
  
  <p>chat.html</p>
  
  <pre><code>&lt;ion-view view-title="Chats"&gt;
  &lt;ion-header-bar class="bar-subheader bar-light"&gt;
        &lt;a href="#/tab/groups" class="button button-clear button-positive"&gt;Groups&lt;/a&gt;
        &lt;a href="#/tab/new" class="button button-clear button-positive"&gt;New group&lt;/a&gt;
      &lt;/ion-header-bar&gt;
    &lt;ion-content&gt;
  
        &lt;ion-list&gt;
          &lt;div class="modal image-modal transparent" ng-click="showPopup()"&gt;
          &lt;ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="content in contents" type="item-text-wrap" href="#/tab/chats/{{content.id}}"&gt;
            &lt;img ng-src="{{content.face}}" &gt;
            &lt;h2&gt;{{content.name}}&lt;/h2&gt;
            &lt;p&gt;{{content.lastText}}&lt;/p&gt;
            &lt;i class="icon ion-chevron-right icon-accessory"&gt;&lt;/i&gt;
            &lt;ion-option-button class="button-assertive" ng-click="remove(content)"&gt;
              Delete
            &lt;/ion-option-button&gt;
          &lt;/ion-item&gt;
            &lt;/div&gt;
        &lt;/ion-list&gt;
  
    &lt;/ion-content&gt;
  &lt;/ion-view&gt;
  </code></pre>