UI grid not displaying data Angular - angularjs

Question

I do have a UI grid which displays the Group Name.
$scope.gridOptions = {
enableSorting : false,
columnDefs: [
{ name:'GroupName' ,enableCellEdit:false}
],
data: [
{ 'GroupName' : groupData}
]
};
For the data in UI grid , i am passing an Object array in the form of :
groupData = [{"GroupName": "Mathematicians"}{"GroupName":"Scientist"}]
But am not getting anything in the UI grid.
Thanks in advance

Answer 1

Some observations :
Your $scope.groupData is not having a valid JSON.
It should be $scope.groupData = [{"GroupName": "Mathematicians"},{"GroupName":"Scientist"}]
Your gridOptions object should be like this.
$scope.gridOptions = {
data: 'groupData',
enableSorting : false,
columnDefs: [{
field: 'GroupName',
displayName: 'Group Name',
name:'GroupName',
enableCellEdit:false
}]
};
DEMO
var app = angular.module('uigrid', ['ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.gridOptions = {
data: 'groupData',
enableSorting : false,
columnDefs: [{
field: 'GroupName',
displayName: 'Group Name',
name:'GroupName',
enableCellEdit:false
}]
};
$scope.groupData = [{"GroupName": "Mathematicians"},{"GroupName":"Scientist"}]
}]);
</style> <!-- remove this, it is just for jsfiddle -->
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>
<style>
.grid {
width: 500px;
height: 250px;
}
<div ng-app="uigrid">
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" class="grid"></div>
</div>
</div>

Answer 2

You are nesting one level too deep when passing the data.
Instead of (the equivalent of):
data: [ {
GroupName: [
{ GroupName: 'Mathematicians' },
{ GroupName: 'Scientist' }
]
} ]
you just want to pass all the data in the data property, so you get:
data: groupData