Recently, I started using angularjs to develop a basic web application. Below is the code structure of my simple view displaying a list of candidates and allowing me to search for candidates in the database.

Here's my Javascript controller:

appRoot.controller('CandidateController', function ($scope, $location, $resource) {
    var searchcandidates={

        Name:$("#txtname").val(),
        Email:$("#txtemail").val()
    };
    var Listcandidates = $resource('/api/Candidate', {Name:$("#txtname").val(), Email:$("#txtemail").val()}, { update: { method: 'GET' } });

    $scope.candidateslist = [];

     Listcandidates.query(function (data) {
        $scope.candidateslist.length = 0;
        angular.forEach(data, function (CandidateData) {
            $scope.candidateslist.push(CandidateData);
        })
    });

     $scope.SearchCandidates = function () {
         alert($("#txtname").val());
         var list = $resource('/api/Candidate', { id: "2" } );

     }




    var init = function () {

    }

    init();
});

My Cshtml:

@{
    Layout = null;
}

<div class="FormHeader"><span class="searCandidate"></span>Search Result</div>
<div class="blank"></div>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span2">
            <!--Sidebar content-->

                Search:
          <label>Name</label>
                <input type="text" id="txtname" name="name" />
                <label>Email</label>
                <input type="text" id="txtemail" name="email" />
                <input type="button" value="Save" ng-click="SearchCandidates()" />

        </div>
        <div class="span10">
            <!--Body content-->

            <ul class="candidates">
                <li ng-repeat="candidate in candidateslist"
                    class="thumbnail phone-listing">
                    @*<a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
                      <a href="#/phones/{{phone.id}}">{{phone.name}}</a>*@
                    <div class="item">
                        <span class="green leftMrg">{{candidate.name}}</span>
                        <span class="leftMrg">{{candidate.skill}}</span>
                        <span class="grey leftMrg">Resume ID: {{candidate.id}}</span>
                        <div class="blank"></div>
                        <div class="blank"></div>
                    </div>
                    <div class="item">
                        <span class="bold">{{candidate.exporganization}} </span>
                        <span>Education:{{candidate.eduname}}</span>
                        <span>{{candidate.totalexperience}}</span>
                        <span>Preferred Location: {{candidate.location}}</span>
                    </div>
                    <p></p>
                </li>
            </ul>
        </div>
    </div>
</div>

My app.js:

var appRoot = angular.module('main', ['ngRoute', 'ngGrid', 'ngResource', 'angularStart.directives', 'kendo.directives']);     //Define the main module

appRoot
    .config(['$routeProvider', function ($routeProvider) {
        //Setup routes to load partial templates from server. TemplateUrl is the location for the server view (Razor .cshtml view)
        $routeProvider
            .when('/home', { templateUrl: '/home/main', controller: 'MainController' })
            .when('/contact', { templateUrl: '/home/contact', controller: 'ContactController' })
            .when('/about', { templateUrl: '/home/about', controller: 'AboutController' })
            .when('/demo', { templateUrl: '/home/demo', controller: 'DemoController' })
            .when('/candidate', { templateUrl: '/home/candidate', controller: 'CandidateController' })
            .otherwise({ redirectTo: '/home' });
    }])
    .controller('RootController', ['$scope', '$route', '$routeParams', '$location', function ($scope, $route, $routeParams, $location) {
        $scope.$on('$routeChangeSuccess', function (e, current, previous) {
            $scope.activeViewPath = $location.path();
        });
    }]);

My CandidateController.cs

public class CandidateController : ApiController
    {
        CandidateSearchDAL objCandidateSearchDAL = new CandidateSearchDAL();



        // GET api/<controller>
        public IEnumerable<CandidateModel> Get()
        {
            List<CandidateModel> lstCandidates = objCandidateSearchDAL.GetSearchCandidates();
            return lstCandidates;
        }

        // GET api/<controller>/5
        public string Get(string id)
        {
            return "value";
        }

        // POST api/<controller>
        public void Post(string Name, string Email)
        {
        }

        // PUT api/<controller>/5
        public void Put(int id, [FromBody]string value)
        {
        }

        // DELETE api/<controller>/5
        public void Delete(int id)
        {
        }
    }

After loading the page for the first time, it displays all the candidates perfectly by calling the controller's IEnumerable Get() method. However, when I try clicking the save button, it fails to call the controller API.