Angular js GUI not updating

Question

I have a HTML table where I change the background colour of each cell using ng-class directive.

For some reason the colours of the cell do not update, unless I do something like resize the browser.

I am unsure what is wrong.

Was wondering it has something to do with the fact that the html page also uses things such as jquery which may interfere with things.

Have already tried a number of things like scope.$apply or scope.$digest in a number of places which seems to have no affect.

It seems to happen when I use the context menu provided at

http://ngmodules.org/modules/bp-ngContextMenu

After I use the context menu provided here the table no longer renders correctly unless I resize the browser

Thanks

Answer 1

With not much to go by, I made you a pretty table instead. Use it, and the girls will go wild:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.shades = [];
    $scope.shadeSquares = [];
    var init = function () {
        for (var i = 1; i < 30; i++)
        {
            if (i%2==0)
            {
                $scope.shadeSquares.push(i);
            }
            var shade = Math.floor((i/30) * 256);
            $scope.shades.push("rgb(64, 128, "+shade+")");
        }
    };
    init();
});

td {
    height: 10px;
    width: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
    <table>
        <tr ng-repeat="y in shadeSquares">
            <td ng-repeat="x in shadeSquares" ng-style="{'background-color':shades[$index + $parent.$index]}">
            </td>
        </tr>
    </table>
</div>