Angular UI Grid reloading cell templates

Question

I can't figure out how to do what's supposed to be very simple.

I have 10 columns in my UI grid, they are all editable. My objective is dynamically "disable" or have them be "required" inputs, depending on the options of a scope object.

The object:

$scope.columnOptions = {
    'column1': 'MANDATORY',
    'column2': 'DISABLED'....
}

The cell templates

cellTemplate: '<input ng-disabled="{{ grid.appScope.columnOptions.column1=== \'DISABLED\' }}" ' +
                'ng-required="{{ grid.appScope.columnOptions.column1=== \'MANDATORY\' }}" ' +
                'data-ng-model="row.entity.column1" style="width:95%">'

This works if the object exists upon initialization.

The problem is that when I change the value of columnOptions, the rows don't get updated.

I have tried different ui-grid APIs to reload my template but it did not work:

        $scope.gridApi.core.refresh();
        $scope.gridApi.core.raise.reloadData();
        $scope.gridApi.core.refreshRows();
        $scope.gridApi.core.notifyDataChange('all');

I've added a plunker: http://plnkr.co/edit/3bIrtJuwHNrTeltIPAXw?p=preview

Answer 1

Your cell templates are not correct:

cellTemplate: '<input ng-disabled="grid.appScope.columnOptions.column1=== \'DISABLED\'" ' +
            'ng-required="grid.appScope.columnOptions.column1=== \'MANDATORY\' " ' +
            'data-ng-model="row.entity.column1" style="width:95%">'

You do not use {{}} within ng- related syntax as it already parses it as angular:

Fixed Plnkr here