Angularjs DOM is refreshed but screen is not redrawing. Not sure where to go from here

Question

I am having a very troubling problem where ng-click updates the expected scope variables, the scope variables appear to change on the DOM ( when viewed via the chrome debugger) but the dom elements that have changed are not redrawn in the browser. I have noticed across multiple browsers and devices BUT ONLY WHEN THE SCREEN WIDTH IS BELOW 768. I am using angular version 1.2.6. Has anyone come across this type of issue??

I have simplified the code to try to isolate and confirm what is happening. Here is the code in its simplified version:

First the view:

<section class="stream-area">
<div class="group">        
    <div class="gw-fixed-top-panel">
        <div  class="group-heading ">
            <div class="panel-title">
                <span class="fleft name" ng-click="usergroup.collapsed=!usergroup.collapsed"> CLICK HERE </span>
                    <a ng-show="usergroup.collapsed" title="Click to edit group" ><i class="fa fa-cog"></i></a>

                    <a ng-hide="usergroup.collapsed" title="Click to edit group" ><i class="fa fa-chevron-up"></i></a>

                <div> {{usergroup.collapsed}}</div>                           
            </div>
        </div>
    </div>
</div>
</section>

The controller does nothing at this point...

'use strict';
(function () {
var groupController = function($scope) {
    $scope.usergroup={};
    $scope.usergroup.collapsed=true;
};
myOverall.myApp.controller('GroupController',['$scope', groupController]);
}());

The controller is invoked by via .config: (function () { golfWire.gwWebApp =angular.module('gwWebApp', [ 'ngRoute', 'ngAnimate', 'ngResource', 'ui.bootstrap', 'firebase', 'LocalStorageModule', 'ngGrid' ]);

myOverall.myApp
    .config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider) {
        $routeProvider
        .when('/group/view', {
            controller: 'GroupController',
            templateUrl: '/app/views/group.html'
          })
          .otherwise({
            redirectTo: '/main'
          });
    /* $locationProvider.html5Mode(true); */
}]);

Answer 1

Add this function in your controller

$scope.toggleUserGroup = function(){
       $scope.usergroup.collapsed = ! $scope.usergroup.collapsed;
       $scope.$apply();

}

Call this function on ng-click. This should get the DOM updated and refreshed.

Reasoning: By calling $apply() you trigger a digest() cycle, which checks for changed expression and repaints the DOM if need be.

Incase this doesn't fix the issue, please provide a plunkr/fiddle. Would be happy to get some working code.

Thanks,