Fixed #40 with test

dist/js/ionic-angular.js

@@ -858,6 +858,14 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
   angular.extend(this, ionic.controllers.TabBarController.prototype);
 
   ionic.controllers.TabBarController.call(this, {
+    controllerChanged: function(oldC, oldI, newC, newI) {
+      $scope.controllerChanged && $scope.controllerChanged({
+        oldController: oldC,
+        oldIndex: oldI,
+        newController: newC,
+        newIndex: newI
+      });
+    },
     tabBar: {
       tryTabSelect: function() {},
       setSelectedItem: function(index) {},
@@ -891,7 +899,8 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
     restrict: 'E',
     replace: true,
     scope: {
-      animation: '@'
+      animation: '@',
+      controllerChanged: '&'
     },
     transclude: true,
     controller: 'TabsCtrl',

dist/js/ionic.js

@@ -4923,7 +4923,6 @@ ionic.controllers.TabBarController = ionic.controllers.ViewController.inherit({
 
     if(shouldChange) {
       this.setSelectedController(index);
-      this.controllerChanged && this.controllerChanged(this.selectedController, this.selectedIndex);
     }
   },
 
@@ -4932,11 +4931,16 @@ ionic.controllers.TabBarController = ionic.controllers.ViewController.inherit({
     if(index >= this.controllers.length) {
       return;
     }
+    var lastController = this.selectedController;
+    var lastIndex = this.selectedIndex;
+
     this.selectedController = this.controllers[index];
     this.selectedIndex = index;
 
     this._showController(index);
     this.tabBar.setSelectedItem(index);
+
+    this.controllerChanged && this.controllerChanged(lastController, lastIndex, this.selectedController, this.selectedIndex);
   },
 
   _showController: function(index) {

js/controllers/tabBarController.js

@@ -55,7 +55,6 @@ ionic.controllers.TabBarController = ionic.controllers.ViewController.inherit({
 
     if(shouldChange) {
       this.setSelectedController(index);
-      this.controllerChanged && this.controllerChanged(this.selectedController, this.selectedIndex);
     }
   },
 
@@ -64,11 +63,16 @@ ionic.controllers.TabBarController = ionic.controllers.ViewController.inherit({
     if(index >= this.controllers.length) {
       return;
     }
+    var lastController = this.selectedController;
+    var lastIndex = this.selectedIndex;
+
     this.selectedController = this.controllers[index];
     this.selectedIndex = index;
 
     this._showController(index);
     this.tabBar.setSelectedItem(index);
+
+    this.controllerChanged && this.controllerChanged(lastController, lastIndex, this.selectedController, this.selectedIndex);
   },
 
   _showController: function(index) {

js/ext/angular/src/directive/ionicTabBar.js

@@ -6,6 +6,14 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
   angular.extend(this, ionic.controllers.TabBarController.prototype);
 
   ionic.controllers.TabBarController.call(this, {
+    controllerChanged: function(oldC, oldI, newC, newI) {
+      $scope.controllerChanged && $scope.controllerChanged({
+        oldController: oldC,
+        oldIndex: oldI,
+        newController: newC,
+        newIndex: newI
+      });
+    },
     tabBar: {
       tryTabSelect: function() {},
       setSelectedItem: function(index) {},
@@ -39,7 +47,8 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
     restrict: 'E',
     replace: true,
     scope: {
-      animation: '@'
+      animation: '@',
+      controllerChanged: '&'
     },
     transclude: true,
     controller: 'TabsCtrl',

js/ext/angular/test/directive/ionicTabBar.unit.js

@@ -36,6 +36,28 @@ describe('Tab Bar Controller', function() {
 
     expect(ctrl.getSelectedControllerIndex()).toEqual(1);
   });
+
+  it('Calls change callback', function() {
+    scope.onControllerChanged = function(oldC, oldI, newC, newI) {
+    };
+
+    // Add a controller
+    ctrl.add({
+      title: 'Cats',
+      icon: 'icon-kitty-kat'
+    });
+    ctrl.add({
+      title: 'Dogs',
+      icon: 'icon-rufus'
+    });
+
+    spyOn(ctrl, 'controllerChanged');
+
+    expect(ctrl.getSelectedControllerIndex()).toEqual(0);
+    ctrl.select(1);
+
+    expect(ctrl.controllerChanged).toHaveBeenCalled();
+  });
 });
 
 describe('Tab Bar directive', function() {

js/ext/angular/test/tabs.html

@@ -47,8 +47,8 @@
       }
     </style>
   </head>
-  <body>
+  <body ng-controller="RootCtrl">
-    <tabs animation="fade-in-out">
+    <tabs animation="fade-in-out" controller-changed="onControllerChanged(oldController, oldIndex, newController, newIndex)">
 
       <tab title="Home" icon-on="icon-ios7-filing" icon-off="icon-ios7-filing-outline" ng-controller="HomeCtrl">
         <header class="bar bar-header bar-secondary">
@@ -111,6 +111,14 @@
     <script>
       angular.module('tabsTest', ['ionic.ui', 'ionic.service.modal', 'ionic.service.actionSheet'])
 
+      .controller('RootCtrl', function($scope) {
+        $scope.onControllerChanged = function(oldController, oldIndex, newController, newIndex) {
+          console.log('Controller changed', oldController, oldIndex, newController, newIndex);
+          console.log(arguments);
+        };
+      })
+
+
       .controller('HomeCtrl', function($scope, Modal, ActionSheet) {
         $scope.items = [];
 

test/controllers/tabs.html

@@ -17,6 +17,7 @@
       </header>
 
       <main class="has-header content">
+
         <div id="tab1">
           <h2>Tab 1</h2>
           <p>
@@ -42,7 +43,7 @@
           </p>
         </div>
       </main>
-      <nav id="tab-bar" class="tabs tabs-top tabs-success"></nav>
+      <div id="tab-bar" class="tabs tabs-success"></div>
     </section>
 
     <script src="../../dist/js/ionic.js"></script>
@@ -88,7 +89,7 @@
         el: tab2
       });
       c2.title = 'Dogs';
-      c2.icon = 'icon-gear';
+      c2.icon = 'icon-gear-a';
       var c3 = new controller({
         el: tab3
       });