javascript - AngularJS select required -

i'm having issues setting validation select. code reads like

html

<form name="customerform" novalidate="novalidate" data-ng-submit="submit()">     <li class="has-error" data-ng-if="customerform.country.$error.required">         {{ 'countryrequired' | translate }}     </li>      <label for="ddlcountries">{{ 'country' | translate }}</label>     <select id="ddlcountries" name="country" class="form-control"         data-ng-model="selectedcountry"         data-ng-options="option.text option in countries track option.id"         data-ng-change="countrychange()" required="required">         <option value="" selected="selected">{{ 'selectcountry' | translate }}</option>     </select> </form> 

js controller

$scope.countries = []; countryservice.getcountries().then(function (results) {     $scope.countries = results.data; }, function (error) {     console.log(error.data.message); });  $scope.$watch('customer.country', function (id) {     // select value on dropdown list     $scope.selectedcountry = { id: id }; });  $scope.countrychange = function () {     $scope.customer.country = $scope.selectedcountry.id; };  $scope.submit = function () {     if ($scope.customerform.$valid) {         customerservice.postcustomerform($scope.customer).success(             function (data, status, headers, config) {                 /*success callback*/             }).error(function (data, status, headers, config) {                 alert("submitting form failed!");         });     } else {         console.log("invalid fields");     } }; 

i've tried different things setting selected="selected" on select didn't work. tried required , ng-required without luck.

am missing or doing wrong?

the problem reset select model original 1 defined replaced new one. @ piece of code:

$scope.$watch('customer.country', function(id) {     $scope.selectedcountry = {id: id}; }); 

in code overwrite $scope.selectedcountry totally new object, model has been used setting form validation destroyed , new validation never build.

in case can update selectedcountry model this:

$scope.$watch('customer.country', function(id) {     if (id) {         $scope.selectedcountry.id = id;     } }); 

but better, remove wather together, don't need since have ngchange directive, can update selectedcountry.id.

demo: http://plnkr.co/edit/cxdrdryxzn38fnanoqid?p=preview