Angular UI Grid How to bind value from variable - angularjs

Question

is it possible to bind value from the $scope variable in Angular UI Grid?
There is a $scope.number value which I want to bind and show in Number column:
app.controller('MainCtrl', function ($scope, $http) {
$scope.gridOptions = { enableRowSelection: true, enableRowHeaderSelection: false };
$scope.number = 01234567;
$scope.gridOptions.columnDefs = [
{ field: "contactId", displayName: "CID", width: 60 },
{ field: "name", displayName: "Contact Name" },
{ field: "number", displayName: "Number", cellTemplates: '<div class="ui-grid-cell-contents"> {{row.entity.number}} </div>'}
];
$scope.contacts = [];
$http.get('contacts.json').success(function (data) {
data.forEach( function( row, index ) {
$scope.contacts.push(row);
});
$scope.gridOptions.data = data;
console.log('data from contacts.json', data);
});
});
I'm trying to define row.entity in CellTemplate property, but it doesn't work. plunker

Answer 1

You would have to add the $scope variable to your data array:
var app = angular.module('app', ['ui.grid']);
app.controller('MainCtrl', function ($scope, $http) {
$scope.gridOptions = { enableRowSelection: true, enableRowHeaderSelection: false };
$scope.number = 01234567;
$scope.gridOptions.columnDefs = [
{ field: "contactId", displayName: "CID", width: 60 },
{ field: "name", displayName: "Contact Name" },
{ field: "number", displayName: "Number", cellTemplates: '<div class="ui-grid-cell-contents"> {{row.entity.number}} </div>'}
];
$scope.contacts = [];
$http.get('contacts.json').success(function (data) {
data.forEach( function( row, index ) {
row.number = $scope.number;
$scope.contacts.push(row);
});
$scope.gridOptions.data = data;
console.log('data from contacts.json', data);
});
});