AngularJs using ui-select "Cannot set property 'gridOptions' of undefined" [duplicate]

I`m trying to get data from database in dropdown menu used with ui-select in angularJS and by clicking a button to show below in ui-grid some data related to selected item.

I have tried with select, option tags it was working properly. After that I tried with ui-select with angular and I failed, now it does not work even the previous try.

I have created angular file, getting the data from database in JSON format successfully, but in console it gives me "Cannot set property 'gridOptions' of undefined".

Angular JS code

var app = angular.module('UmsApp', ['ngTouch', 'ui.grid', 'ui.select']);
app.controller('StudentController', [function ($scope, $http) {
    $scope.gridOptions = {};
    $scope.gridOptions2 = {};
    $http.get('/Default/GetStudents/').then(function (d) {
        $scope.gridOptions.data = d.data;
        console.log(gridOptions.data);
        $scope.checkSelection = function () {
            if ($scope.stuStelec != "" && $scope.stuStelec != undefined) {

                $http.get('/Courses/GetCourses/' + $scope.stuStelec).then(function (a) {
                    $scope.gridOptions2.data = a.data;
                    console.log(gridOptions2.data);
                }, function (a) {
                    alert(a.data);
                });
            }
            else
                $scope.msg = 'Please Select a student';
        }
    }, function (d) {
        alert(d.data);
    });
}]);

HTML

<div style="padding-left:30%" ng-controller="StudentController">
    <div class="row">
        <h6 style="padding-right:2%; font-size:24px;">Select student: </h6>

        <ui-select ng-model="stuStelec.selected" theme="bootstrap">
            <ui-select-match placeholder="Enter a name...">
                {{$select.selected.name}}
            </ui-select-match>
            <ui-choices class="ui-select-choices" repeat="x in gridOptions.data | filter: $select.search">
                {{x.Name}} {{x.Surname}}
            </ui-choices>
        </ui-select>

        @* === AT FIRST TIME THIS WAS WORKING

        <select style="padding-right:2%" name="students" class="custom-select" ng-model="stuStelec">
            <option value="" disabled selected hidden>Please Select...</option>
            <option ng-repeat="x in gridOptions.data" value="{{x.id}}">{{x.Name+" "+x.Surname}}</option>
        </select>
        <input type="button" value="Select" ng-click="checkSelection()" />
        *@

    </div><br /><br />
    <div id="grid1" ui-grid="gridOptions2" class="grid"></div>
    <span style="color:red">{{msg}}</span>
</div>

I get this error in console:

TypeError: Cannot set property 'gridOptions' of undefined
    at Object.<anonymous> (AppJs.js:3)
    at Object.invoke (angular.js:5093)
    at $controllerInit (angular.js:11138)
    at nodeLinkFn (angular.js:10009)
    at compositeLinkFn (angular.js:9350)
    at compositeLinkFn (angular.js:9353)
    at publicLinkFn (angular.js:9215)
    at angular.js:1928
    at Scope.$eval (angular.js:18816)
    at Scope.$apply (angular.js:18915)