JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app>
    <div ng-controller="TestCtrl">Counter = {{info}} - <span class="text-info">this does not update on button click, but I want it to</span>
        <br>Data = {{data}} - <span class="text-success">this updates on button click and should trigger update on the "Counter" too, but it doesn't</span>
        <br>
        <button type="button" ng-click="increaseCounter()">Increase Counter</button>
    </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script> <style>

JavaScript

function TestCtrl($scope) {
    $scope.info = 0;

    $scope.data = [{
        counter: 0
    }];

    $scope.increaseCounter = function () {
        for (var i = 0; i < $scope.data.length; i++) {
            $scope.data[i].counter = $scope.data[i].counter + 1;
        }
    }

    $scope.$watch('data', function () {
        $scope.info = $scope.info + 1;
    });
}