title: localization don't work with ion-tab's title in meteor
body: <p>I am using Meteor + Angular2 + Ionic</p>
  
  <p>Now I need to add i18n to my project. After trying learning Angular official i18n&amp;l10n and angular-translate, I abandoned them for lack of example which makes sense to me. </p>
  
  <p>At last I used:</p>
  
  <pre><code>meteor npm install angular-localization --save
  </code></pre>
  
  <p>This package is very simple: each language has a corresponding json file containing all keys and values. The i18n directive just loads the values and sets to element's innerText. I made some modifications and enjoyed using it until I tried to set ion-tab's title.</p>
  
  <p><br/>
  The source of main function in angular-localization after my modification is:</p>
  
  <pre><code>angular
    .module('i18n')
    .directive('i18n', ['$rootScope', '$i18n', function($rootScope, $i18n) {
       return {
          priority: 100,
          link: function(scope, element, attrs) {
  
             function applyTabTitle(translation) {
                var tabs = element.parent();
  
                var idx = tabs.children('ion-tab').index(element);
                var a = tabs.children('a').eq(idx);
                a.children('span.tab-title').text(translation);
             }
  
             function applyLocal() {
                 try {
                    var jsn = JSON.parse(attrs.i18n);
                    for (prop in jsn) {
                       var translation = $i18n(jsn[prop]);
  
                       if (prop == 'tabtitle') {
                          applyTabTitle(translation);
                       } else {
                          element.attr(prop, translation);
                       }
                   }
               } catch (e) {
                   var translation = $i18n(attrs.i18n);
                   element.text(translation);
               }
           }
  
           applyLocal();
  
           $rootScope.$on('i18n.language:change', function () {
              applyLocal();
           });
        }
     }
  }]);
  </code></pre>
  
  <p>As defined in ionTabNav, The ion-tab will be expanded into something like this</p>
  
  <pre><code>&lt;ion-tab icon-on="ios-icon-home" href="#/home"&gt;&lt;/ion-tab&gt;
  &lt;a ng-class="tab-item"&gt;
     &lt;i class="icon"&gt;&lt;/i&gt;
     &lt;span class="tab-title" ng-bind-html="title"&gt;&lt;/span&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>So, I can't just use this (homepage is a language key):</p>
  
  <pre><code>&lt;ion-tab data-i18n="homepage" ...&gt;..&lt;/ion-tab&gt;
  </code></pre>
  
  <p>because "element.text(translation)" will destroy the expandation. That's why I invented "applyTabTitle" function, then use the following in html:</p>
  
  <pre><code>&lt;ion-tab data-i18n='{"tabtitle":"profile"}'&gt;..&lt;/ion-tab&gt;
  </code></pre>
  
  <p><br/>
  But unfortunately, the tab's title remains blank after just redirected to homepage from login page with "$state.go('homepage')", while if I refresh the homepage, the title shows up correctly.</p>
  
  <p>I guess maybe the reason is i18n redirective did not got run prior to ionTab redirective. so I tried to set the priority to 100. but no effect.</p>
  
  <p>Maybe I was on the wrong way from the very beginning. What I want to say is these highly automated frameworks are really hard to customize. the developing process is so bumpy.</p>
  
  <p>Thanks a lot for any hints.</p>