Modal Example: Launching a modal from nav bar


Hello ionic community!

I am a rookie ionic dev, I am building a simple app using the Tabs And Navigation: Nightly example as a template to how to create a tab based app.

I am slightly confused how to use modals correctly, could somone please show me a simple example using the tabs navs as a base?

I have add the controller:

app.controller('MainCtrl', function($scope, $ionicModal) {
  $ = {
    name: 'Mittens Cat',
    info: 'Tap anywhere on the card to open the modal'

  $ionicModal.fromTemplateUrl('info-modal.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal

  $scope.openModal = function() {

  $scope.closeModal = function() {

  $scope.$on('$destroy', function() {

In tmeplates I have created: info-modal.html

  <ion-view view-title="info modal">
        <ion-content class="padding">
          <div class="modal">
      <h1 class="title">Edit Contact</h1>
      <div class="list">
        <label class="item item-input">
          <span class="input-label">Name</span>
          <input type="text" ng-model="">
        <label class="item item-input">
          <span class="input-label">Info</span>
          <input type="text" ng-model="">

      <button class="button button-full button-energized" ng-click="closeModal()">Done</button>

Now I want to open model using my info button which currently directs to a page:

<button class="button button-icon icon ion-ios-information-outline" ui-sref="tab.galleryDemo1">

What i the correct way to do this?
I have looked at:

But I am unsure what to do?

Any help would be greatly appreciated.



Does anyone have any guides or info to point me in right direction. I posted this when the forum was down.