Angularfire-seed + module.simpleLoginTools = ng-cloak issue in Ionic


I’m writing a book about deploying AngularJS applications & have a mostly working mash up of the Angularfire-seed & Ionic Framework that will server as an example for the readers to deploy. Everything works as the vanilla Angularfire-seed chat app, except that the login view’s use of the ng-cloak directive breaks the login form in the following ways.

Three elements utilize the ng-cloak directive; the Create Account & Cancel buttons & the confirm pass input.

  1. If I remove the ng-cloaks from aforementioned elements then the
    createMode interaction works as intended but the form will not
    submit (displaying the “please enter an email address” error).
  2. If I leave the ng-cloaks on those 3 elements then the createMode
    interaction fails & the “please enter email address” error is thrown

There are no error in the DevTools console for any of the mentioned issues & all necessary dependencies are in place (according to Batarang). I attempted removing all of the Ionic view code & returned the login view to the seed version & the everything works as intended…except that I need this to work within Ionic.

I found the gist for module.simpleLoginTools & am wondering if the mentioned change to ng-cloak is causing this issue when used within the Ionic Framework?

My code can be accessed on GitHub & a deployed example can be accessed @

Thank You Kindly In Advance,


I’m looking through the code right now. I am taking a GUESS here, but I think the problem is your lack of “dot notation”.

Ionic quite frequently creates child scopes or isolate scopes. So primitives in your controller will not get 2 way binding.

Try the following :

.controller('LoginCtrl', ['$scope', 'loginService', '$location', function($scope, loginService, $location) {
   $ = {
      "email"        : null,
      "pass"         : null,
      "confirm"      : null,
      "createMode"   : false

   $scope.login = function(cb) {
      $scope.err = null;
      if( !$ ) {
         $scope.err = 'Please enter an email address';
      else if( !$ ) {
         $scope.err = 'Please enter a password';
      else {
         loginService.login($, $, function(err, user) {
            $scope.err = err? err + '' : null;
            if( !err ) {
               cb && cb(user);


            <label class="item item-input item-stacked-label">
                <span class="input-label">password</span>
                <input type="password" placeholder="embody strength" ng-model="data.pass" />

            <label class="item item-input item-stacked-label" ng-show="createMode">
                <span class="input-label">confirm pass</span>
                <input type="password" placeholder="embody strength" ng-model="data.confirm" />

            <div class="row">
                <div class="col col-50">
                    <button class="button button-block button-positive" ng-click="login()" ng-hide="createMode">Log In</button>
                </div> <!-- end .col-50 -->

                <div class="col col-50">
                    <button class="button button-block button-calm" ng-click="createMode = true" ng-hide="createMode">Register</button>
                </div> <!-- end .col-50 -->
            </div> <!-- end .row -->

            <div class="row">
                <div class="col col-50">
                    <button class="button button-block button-calm" ng-show="createMode" ng-click="createAccount()">Create Account</button>
                </div> <!-- end .col-50 -->

                <div class="col col-50">
                    <button class="button button-block button-assertive" ng-show="createMode" ng-click="createMode = false">Cancel</button>
                </div> <!-- end .col-50 -->
            </div> <!-- end .row -->

            <div class="row">
                <div class="col">
                    <p ng-show="err" class="assertive text-center">{{err}}</p>
                </div> <!-- end .col -->
            </div> <!-- end .row -->
    </div> <!-- end .list -->

        <input type="text" ng-model="" />
        <input type="password" ng-model="data.pass" />
    <label ng-cloak ng-show="data.createMode">
        <span>confirm pass</span>
        <input type="password" ng-model="data.confirm" />
    <button ng-click="login()" ng-hide="data.createMode">Log In</button>
    <button ng-click="data.createMode = true" ng-hide="createMode">Register</button>
    <button ng-cloak ng-show="data.createMode" ng-click="createAccount()">Create Account</button>
    <button ng-cloak ng-show="data.createMode" ng-click="data.createMode = false">Cancel</button>

    <p ng-show="err" class="error">{{err}}</p>


Issue with model binding when using ionic

Thank You soo much for your explanation @Calendee!
Works as intended.