angularjs - ng-if inside ng-repeat not updating from controller -

so new angular, started right bear me please... want loop thru array , inside loop evaluate condition display html looks this:

<div ng-controller="buildercontroller"> <div ng-repeat="row in formrows" class="fe-form-row">     <div class="fe-form-draggable-item">         <div class="fe-form-l-side-menu bg-primary col-md-1 pull-left">             <i class="fa fa-cog"></i>             <i class="fa fa-close"></i>         </div>         <div class="gray-lighter col-md-11 pull-left">             <div ng-if="row.columns.length == 0">                 <div ng-click="open('lg','layout')" id="fe-form-container-base" class="fe-form-r-side-menu gray-lighter col-md-12">                     <div class="fe-form-insert-menu">                         <i class="fa fa-plus-square-o"></i>                         <span>add column(s)</span>                     </div>                 </div>             </div>         </div>     </div> </div> </div> 

the first time arround column empty array evaluates true , html piece displayed, good. , tried setting not empty array , evaluates false , html not showed. far good. problem when change value of column inside controller:

admin_app.controller('buildercontroller', function ($scope, $modal, $log) {     //default value, empty row     //todo: assign value these , form should automatically created     $scope.formrows = [         {             'layout': 'empty',             columns: []         }     ];     $scope.animationsenabled = true;     //todo: these should loaded server-side somehow...     $scope.columnsoptions = ['1', '2', '3', '4', '5', '6'];      $scope.open = function (size, content) {         var modalinstance = $modal.open({             animation: $scope.animationsenabled,             templateurl: 'fe-form-' + content + '-container.html',             controller: 'modalinstancectrl',             windowclass: 'fe-form-builder',             size: size,             resolve: {                 columnsoptions: function () {                     return $scope.columnsoptions;                 }             }         });          modalinstance.result.then(function (selecteditem) {             $scope.selected = selecteditem;         }, function () {             $log.info('modal dismissed at: ' + new date());         });          $scope.toggleanimation = function () {             $scope.animationsenabled = !$scope.animationsenabled;         };     }; });  admin_app.controller('modalinstancectrl', function ($scope, $modalinstance, columnsoptions) {      $scope.columnsoptions = columnsoptions;     $scope.selected = {         columnsoption: $scope.columnsoptions[0]     };      $scope.ok = function () {         var columns = [];         (var = 0; < $scope.selected.columnsoption; i++) {             columns.push({                 type: $scope.selected.columnsoption,                 elements: []             });         }         //update formrows var new columns         $scope.formrows = [             {                 'layout': $scope.selected.columnsoption,                 columns: columns             }         ];         console.log(' $scope.formrows ', $scope.formrows[0].columns.length);         $modalinstance.close($scope.selected.item);     };      $scope.cancel = function () {         $modalinstance.dismiss('cancel');     }; }); 

the console.log shows columns have been correctly updated based on user input, html not re-rendered hide html piece since columns no longer empty array. missing here, there wrong approach? mentioned new angular.

if understand correct, data structure this:
formrows -> array
row -> object contains object columns
columns -> array

i think problem angular tracking changes formrows, not happening when columns object change because there no direct change in formrows. angular not trying check changes @ sub-sub object level, speak. either create new object everytime you're changing rows , add formrows. or can add deepwatch check changes columns array. check this:

how deep watch array in angularjs?