Not update scope immediately, watchers dont work at modal windows using ngDialog angular js

Question

I am using ngDialog module for angularjs. My problem is that when I make a action at modal windows, I hope that my interface change depending of scope changes, but ng-if or ng-show or simply print variable not update. If I print in console I can see the rules values, but the interface not update.

My Code:

controller:

export class NewEntityController {

constructor($scope, $routeParams, $location, ngDialog) {
    "ngInject";

    // initialize scope
    $scope.ruleForm = false;
    $scope.rules = [];

    $scope.showRulesSetting = function()
    {
        ngDialog.open({ template: 'views/modal-windows/rules.html', className: 'ngdialog-theme-default', scope: $scope });
    };

    $scope.addRule = function()
    {
        $scope.rules.push('rule-'+new Date().getTime());  
        console.log($scope.rules); 
    }
}}

Normal Page View:

<span style="color: blue;" ng-click="showRulesSetting()"><i class="fa fa-cog" aria-hidden="true"></i>&nbsp;Advance rules</span>

Modal Windows View:

<div>
   <button ng-click="addRule()">Add</button>
</div>
<div id="ruleslist" ng-if="rules.length > 0">
   {{rules}}
</div>

When I click in "Add" button I can see rules value in console, but in interface div with id="ruleslits" never show and the result of {{rules}} is always []. I test with $scope.$apply() but whithout result.