diff --git a/js/ext/angular/src/directive/ionicBar.js b/js/ext/angular/src/directive/ionicBar.js
index 4dbe018e08..2b21f5ecbd 100644
--- a/js/ext/angular/src/directive/ionicBar.js
+++ b/js/ext/angular/src/directive/ionicBar.js
@@ -48,12 +48,12 @@ angular.module('ionic.ui.header', ['ngAnimate', 'ngSanitize'])
 
       $scope.headerBarView = hb;
 
-      $scope.$watch('leftButtons', function(val) {
+      $scope.$watchCollection('leftButtons', function(val) {
         // Resize the title since the buttons have changed
         hb.align();
       });
 
-      $scope.$watch('rightButtons', function(val) {
+      $scope.$watchCollection('rightButtons', function(val) {
         // Resize the title since the buttons have changed
         hb.align();
       });
diff --git a/js/ext/angular/test/directive/ionicBar.unit.js b/js/ext/angular/test/directive/ionicBar.unit.js
index 44dd2cef3e..1e9b3d27cb 100644
--- a/js/ext/angular/test/directive/ionicBar.unit.js
+++ b/js/ext/angular/test/directive/ionicBar.unit.js
@@ -54,4 +54,40 @@ describe('Ionic Header Bar', function() {
     });
   });
 
+  it('Should re-align the title when leftButtons change', function() {
+    rootScope.leftButtons = [];
+    el = compile('<ion-header-bar left-buttons="leftButtons" align-title="right"></ion-header-bar>')(rootScope); 
+    var headerView = el.isolateScope().headerBarView;
+
+    //trigger initial align()
+    rootScope.$apply();
+
+    spyOn(headerView, 'align');
+
+    var button = { content: '<i class="icon ion-gear-a"></i>' };
+    rootScope.leftButtons.push(button);
+    rootScope.$apply();
+
+    expect(headerView.align).toHaveBeenCalled();
+  });
+
+    it('Should re-align the title when rightButtons change', function() {
+    rootScope.rightButtons = [];
+    el = compile('<ion-header-bar right-buttons="rightButtons" align-title="right"></ion-header-bar>')(rootScope); 
+    var headerView = el.isolateScope().headerBarView;
+
+    //trigger initial align()
+    rootScope.$apply();
+
+    spyOn(headerView, 'align');
+
+    var button = { content: '<i class="icon ion-gear-a"></i>' };
+    rootScope.rightButtons.push(button);
+    rootScope.$apply();
+
+    expect(headerView.align).toHaveBeenCalled();
+  });
+
+    
+
 });