Ui.grid and ng-click in same angular app

See more:

AngularJs

I want to bind ng-grid in init function and also I want to show textbox for name field and bind dropdown list for department(from bb) and bind radiobuttonlist for gender(from db). In ng-click i want to update the grid. but in ng-init i can load only radiobuttonlist and dropdown. I cant bind ui.grid . But i can bind grid if i dont have dropdown and radiobutton.

What I have tried:

I have declared one ng-app and I have ng-init function in that app.
in ng-init function i have binded dropdown and radiobutton from database.
in ng-init i want to bing ui-grid also from database. But i cant do that.

var helloApp = angular.module('helloApp', []);
        helloApp.controller('employeesCtrl', function ($scope, $http) {
            $scope.deptList;
            $scope.GenderList;
            $scope.FirstCall = function () {              
                $http.post('WebForm2.aspx/GetList', { data: {} }).success(function (response) {
                    var data = (response.hasOwnProperty) ? response.d : response;
                    $scope.deptList = data;
                })

                $http.post('WebForm2.aspx/GetGender', { data: {} }).success(function (response) {
                    var data = (response.hasOwnProperty) ? response.d : response;
                    $scope.GenderList = data;
                })

                $scope.myData = [
                     { name: "Madhav Sai", age: 10, location: 'Nagpur' },
                     { name: "Suresh Dasari", age: 30, location: 'Chennai' },
                     { name: "Rohini Alavala", age: 29, location: 'Chennai' },
                     { name: "Praveen Kumar", age: 25, location: 'Bangalore' },
                     { name: "Sateesh Chandra", age: 27, location: 'Vizag' }
                ];
                $scope.grdusers = { data: 'myData' }

            }

            $scope.SubmitUser = function () {
                $scope.errMsgName = '';
                $scope.errMsgDept = '';
                $scope.errMsgGender = '';

                var validationSuccess = true;
                if ($scope.userfullName == "" || $scope.userfullName == undefined) {
                    $scope.errMsgName = 'Name Required';
                    validationSuccess = false;
                }
                else {
                }

                if ($scope.userSelect == "" || $scope.userSelect == undefined) {
                    $scope.errMsgDept = 'Please Select Department';
                    validationSuccess = false;
                }

                if ($scope.UserGender == "" || $scope.UserGender == undefined) {
                    $scope.errMsgGender = 'Please Select Gender';
                    validationSuccess = false;
                }

                if (validationSuccess) {

                    alert(true);
                }
            }

            $scope.Clear = function () {
                $scope.errMsgName = '';
                $scope.errMsgDept = '';
                $scope.errMsgGender = '';
                $scope.userfullName = null;
                $scope.userSelect = "";
                $scope.UserGender = false;

            }

        });

<div>
            <span>Name : </span>            
            <span style="color: red">{{errMsgName}}</span>
            <br>
            <br>
            <span>Department :</span>            
                --Select Dept--
                {{dept.deptName}}            
            <span style="color: red">{{errMsgDept}}</span>
            <br>
            <br>
            <span>Gender :</span> 
                {{G.GenderText}}
            <span style="color: red">{{errMsgGender}}</span>
            <br>
            <br> 
            <br>
            <br>
        </div>
        <div>
            <div class="myGrid"></div>
        </div>

if i put ui.grid like this nothing is working.

var helloApp = angular.module('helloApp', ['ui.grid']);

but I can able to bind grid in a separate page that doesn't have dropdown and radiobutton.