AngularJS Bind select list with ajax

Bind select list in angular js with ajax:

HTML:
  <div class="col-md-4" ng-init="vm.getUserRoles()">
                <select class="form-control"
                        id="dropDownType"
                        name="dropDownType"
                        ng-model="vm.RoleId"
                        ng-options="userRoles.id as userRoles.Name for userRoles in vm.userRoles"
                        required>
                    <option value=""> -- Select Role -- </option>
                </select>
            </div>


JQuery:
$scope.vm.getUserRoles = function () {
            $http({
                url: "/api/vehicle/GetUserRoles",
                method: "GET",
            })
           .then(function (data) {
               $scope.vm.userRoles = data.data;
           },
           function (response) {
           });
        }

Web API:
[Route("GetUserRoles")]
        public IHttpActionResult GetUserRoles()
        {
            var data = //get data from db;
            return Ok(data);
        }