Ionic 1.3 Collapse Component

<!DOCTYPE html>
<html ng-app="app">

<head>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="http://code.ionicframework.com/1.3.0/css/ionic.min.css">
  <script src="http://code.ionicframework.com/1.3.0/js/ionic.bundle.min.js"></script>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="appCtrl">
  <h1>Ionic 1.3 Collapse Component</h1>
  
    <collapse-container is-valid="validaForm('forma')" title="'Collapse Teste'" left-header-identifier="1" header-icon="'ion-clock assertive'">
      <collapse-body>
        <form name="forma" ng-init="setForm(this,'forma')">
          <input type="text" ng-model="objeto.nome" required/>
          <input type="number" ng-model="objeto.idade" required/> 
        </form>
        oi {{forma.$valid}}
      </collapse-body>
    </collapse-container>
    
    
    <collapse-container is-valid="validaForm('formTeste')" title="'Collapse Teste1'" left-header-identifier="2" header-icon="'ion-clock assertive'">
      <collapse-body>
        <form name="formTeste" ng-init="setForm(this,'formTeste')">
          <input type="text" ng-model="objeto1.nome" required/>
          <input type="number" ng-model="objeto1.idade" required/> 
        </form>
        oi {{formTeste.$valid}}
      </collapse-body>
    </collapse-container>
  

</body>

</html>

var angular = angular || undefined;

angular.module('app', ['ionic'])

.controller('appCtrl', function($scope, $timeout) {
 $scope.objeto1 ={};
  $scope.objeto = {};
 $scope.forms = {
         allValid: function () {
             var formValidCount = 1;
             angular.forEach(this, function (obj) {
                 if (obj.$valid) {
                     formValidCount++;
                 }
             });
             return (Object.keys(this).length === formValidCount);
         }
     };

     $scope.setForm = function (form, id) {
         var formObj = {};
         $scope.$applyAsync(function () {
             formObj[id] = form;
             $scope.forms[id] = formObj[id][id];
         });
     };

     $scope.validaForm = function(form) {
		if($scope.forms[form]){
			return $scope.forms[form].$valid;
		}
	};
})

.component('collapseContainer', {
  templateUrl: 'collapse.view.html',
  transclude: true,
  bindings: {
    title: '<',
    leftHeaderIdentifier: '<',
    headerIcon: '<',
    isOpen: '=',
    leftHeaderCss: '<',
    headerCss: '<',
    preventDoubleClick: '<',
    isValid: '<'

  },
  controller: function($timeout) {

    var _self = this,
      _wasClicked,
      _preventDoubleClick = function() {
        if (_self.preventDoubleClick) {
          _wasClicked = true;
          $timeout(function() {
            _wasClicked = false;
          }, 1500);
        }
      };

    this.$onInit = function() {
      this.showHideFlag = this.isOpen;
    };

    this.showHide = function() {
      if (!_wasClicked)
        this.showHideFlag = !this.showHideFlag;
      _preventDoubleClick();
    };

    this.$onChanges = function(changesObj) {
      console.log('changesObj', changesObj);
    };
  }
})

.component('collapseBody', {
  template: '<div ng-transclude></div>',
  transclude: true,
  require: {
    parent: '^collapseContainer'
  },
  controller: function() {}
});

/* Styles go here */

.collHeader {
    max-height: 78px;
}

.leftHeader {
    background-color: #4876FF;
    color: white;
    font-weight: bold;
    height: 90px;
    margin-left: -26%;
    margin-top: -27%;
    position: relative;
    text-align: center;
    width: 100%;
}

.leftHeader span {
    position: relative;
    top: 30%;
}

 .invalidStep {
        border: 1px solid #a94442;
        box-shadow: 1px 2px 31px #a94442;
    }

<div class="list card padding-bottom" id="collapse-component" ng-class="{'invalidStep': $ctrl.isValid === false}">
  <div class="item collHeader">
    <div class="row" ng-click="$ctrl.showHide()">
      <div class="col col-20">
        <div class="left" ng-class="$ctrl.leftHeaderCss">
          <span>{{$ctrl.leftHeaderIdentifier}}</span>
        </div>
      </div>
      <div class="col col-67" ng-class="$ctrl.headerCss">
        <h2> <i class="icon" ng-class="$ctrl.headerIcon"></i> {{$ctrl.title}}</h2>
      </div>
      <div class="col col-10">
        <button class="button icon  button-small button-positive" ng-class="{'ion-plus-round':!$ctrl.showHideFlag,'ion-minus-round':$ctrl.showHideFlag}" style="float:right"></button>
      </div>
    </div>
  </div>
  <div class="item item-body" ng-show="$ctrl.showHideFlag">
    <div ng-transclude></div>
  </div>
</div>