javascript - angular js filter not working using Twitter Bootstrap in Chrome Desktop and Mobile but works in other browsers

Question

My code is a simple: ng-repeat="word in words | filter:searchText"

I have an input with ng-model="searchText" that works great on most cases. The problem is when I filter in the first word in the list and then erase it, it doesn't restore the elements. They do show up in the DOM Inspector but it doesn't show up in the page. Now, if I interact with the DOM in anyway, say a window resize, a click, anything, everything just shows up. It appears to be more of a Bootstrap problem rather than an Angular problem. This bug doesn't happen in IE or Firefox. Only in chrome. Any help would be much appreciated.

Note: I am using Twitter Bootstrap 2.3.2 and I tried both Angular 1.0.7 and 1.1.5.

Update: The same thing happens on Chrome for iOS. Safari on iOS works just fine. Really weird...

IMPORTANT UPDATE: Taking out Bootstrap.css from the html makes the ng-filter work correctly on Chrome. So that confirms that angular is working properly and is updating the dom according to my search input field. So the issue appears to be CSS that Bootstrap offers that makes Chrome unhappy.

CODE

//js
<script>
app.directive('showChildOnHover',
   function() {
      return {
        restrict:'A',
        link : function(scope, elm, attrs) {
            scope.expanded = false;
            elm.bind('click', function(e) {
                if(scope.expanded){
                    setTimeout(function() {elm.children('.btn-group').hide('fast');}, 0);
                    scope.expanded = false;
                }
                else{
                    elm.children('.btn-group').show('fast');
                    scope.expanded = true;
                }
                scope.$apply();
            });
       }
   };
});
app.directive('group', function() {
    return {
        restrict: 'E'
    };
});
function GroupsCtrl($scope, fetchGroups, mySharedService) {
    $scope.searchText = "";
    $scope.groups = [{'GroupName':'Test Group'},{'GroupName':'Some Other Group'},{'GroupName':'Another Test'}];
}
</script>
//html
<div id="map-content" ng-controller="GroupsCtrl" class="form-horizontal row-fluid span12 ng-cloak" ng-cloak style="margin:0 0 0 0" ng-app='map'>
    <group ng-animate="'animate'" 
        ng-repeat="group in groups | filter:searchText" 
        show-child-on-hover 
        ng-class="(expanded) ? 'expanded' : ''"
        class="well group span12" style="padding: 5px">
            <span>{{group.GroupName}}</span>
    </group>
</div>