Why is the variable in the view not being updated?

Question

Angular

HTML part:

<menu class="col-md-offset-2" ng-controller="SideBar" id="menu">
            <i class="fa fa-bars" ng-click="test()" ng-model="data"></i>
 </menu>
...
<section>
        <div ng-controller="SideBar" >
            {{data}}
        </div>
</section>

JS:

angular
    .module('CheckMyCode')
    .controller('SideBar',function ($scope,Auth){
        $scope.data = 'Data'
        $scope.test = function () {
            $scope.data = 'New';
        }

After a click, $scope.data becomes New, but {{data}} does not change its value. Throws an error when trying to use $scope.$apply()

Error: $rootScope:inprog
Action Already In Progress