I am new to Angular Programming. If someone can help locating the error.

AddEmployee FORM (HTML)

```
<div ng-controller="EmployeeController">
<form novalidate>
    Name: <input type="text" ng-model="Employee.EmployeeName" /><br />
    Salary:<input type="text"  ng-model="Employee.Salary" /><br />
   <select ng-model="Employee.DepartmentId">
    <option value="`enter code here`">--Select --</option>
    <option ng-repeat="d in Department" ng-selected="selectedItemvalue == d.DepartmentId" value="{{d.DepartmentId}}">{{d.DepartmentName}}</option>
</select>
     <button type="submit" ng-click="SaveData(Employee)">Submit</button>

    </form>

```

Employee Contoller

```
var MyApp = angular.module("MyApp",[])
                .controller("EmployeeController", function ($scope, $http) {
                    $scope.Employee = {
                        EmployeeName: '',
                        Salary: '',
                        DepartmentId:''
                    };
                   $scope.SaveData = function (data) {
                       $http({
                            url: 'PostEmployee',
                            method: 'POST',
                            data: JSON.stringify(data),
                            headers: {'content-type':'application/json'}
                        }).success(function (response) {
                            alert('Success');
                        }).error(function (error) {
                            alert('Error');
                        })
                    }

                    $http.get('GetDepartments').then(function (response) {
                        $scope.Department = response.data;
                    });
                });

```

When I click on submit, SaveData method is probably not called. Plase help

UPDATE:

ng-app="MyApp" is added as parameter to body tag in the layout page and all the required scripts too. Moreover, the dropdown list gets populated correctly.

```
<body ng-app="MyApp">
@RenderBody()

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/angular")
@RenderSection("scripts", required: false)
</body>

```

UPDATE 2:
This is how the source looks in the browser.

```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
    <title>AddEmployee</title>
<link href="/Content/site.css" rel="stylesheet"/>

<script src="/Scripts/modernizr-2.5.3.js"></script>

</head>
<body ng-app="MyApp">

<div ng-controller="EmployeeController">
<form novalidate name="F1">
    Name: <input type="text" ng-model="Employee.EmployeeName" /><br />
    Salary:<input type="text"  ng-model="Employee.Salary" /><br />
   <select ng-model="Employee.DepartmentId">
    <option value="">--Select --</option>
    <option ng-repeat="d in Department" ng-selected="selectedItemvalue == d.DepartmentId" value="{{d.DepartmentId}}">{{d.DepartmentName}}</option>
</select>
    <button type="submit" ng-click="SaveData(Employee)">Submit</button>

    </form>

</div>

<script src="/Scripts/jquery-1.7.1.js"></script>

<script src="/Scripts/angular.js"></script>

<script src="/Scripts/EmployeeController.js"></script>

```