cascading dropdown in angular js,MVC & web api

WEB API CODE :

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Net.Http;

using System.Web.Http;

using WebApplication33.Models;

namespace WebApplication33.Controllers

{

   

    public class ValuesController : ApiController

    {

        public List<COUNTRY> Getc()

        {

            using (Database1Entities obj = new Database1Entities())

            {

                return obj.COUNTRies.ToList();

            }

        }

        public List<STATE> Gets(int CID)

        {

            using (Database1Entities obj = new Database1Entities())

            {

                return obj.STATEs.Where(m => m.CID==CID).ToList();

            }

        }

        

    }

}

VIEW CODE :

@{

    ViewBag.Title = "Index";

}

<link href="~/Content/bootstrap.css" rel="stylesheet" />

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

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

<h2>jay jagannath</h2>

<div class="container" ng-app="app" ng-controller="ctr">

    <form class="form-horizontal">

        <div class="form-group">

            <label class="col-lg-4 control-label">COUNTRY</label>

            <div class="col-lg-4">

                <select class="form-control" ng-options="c.CID as c.CNAME for c in listc" ng-model="CID" ng-change="fillddl()">

                    <option value="">Select</option>

                </select>

            </div>

        </div>

        <div class="form-group">

            <label class="col-lg-4 control-label">STATE</label>

            <div class="col-lg-4">

                <select class="form-control" ng-options="c.SID as c.SNAME for c in lists" ng-model="SID" >

                    <option value="">{{display}}</option>

                </select>

            </div>

        </div>

        <div class="form-group">

            <label class="col-lg-4 control-label"></label>

            <div class="col-lg-4">

                <input type="button" value="Result" ng-click="save()" class="btn btn-primary" />

            </div>

        </div>

        <div class="form-group">

            <label class="col-lg-4 control-label"></label>

            <div class="col-lg-4">

                {{result}}

            </div>

        </div>

    </form>

</div>

<script type="text/javascript">

    angular.module("app", [])

        .controller("ctr", function ($scope, EmpService) {

            $scope.listc = null;

            $scope.lists = null;

            $scope.CID = null;

            $scope.SID = null;

            EmpService.GetCountry().then(function (d) {

                $scope.listc = d.data;

            });

            $scope.fillddl = function ()

            {

                EmpService.GetState($scope.CID).then(function (d) {

                    $scope.display = "Select";

                    $scope.lists = d.data;

                });

            }

            $scope.save = function ()

            {

               

                $scope.result = "Selected country Id is :" + $scope.CID +" Selected state id is :" + $scope.SID;

            }

        })

        .factory("EmpService", function ($http) {

            var fac = {};

            fac.GetCountry = function ()

            {

                return $http.get('http://localhost:53550/api/Values');

            };

            fac.GetState = function (CID) {

                return $http.get('http://localhost:53550/api/Values/Gets?CID=' + CID);

            }

            return fac;

    });

</script>