How to get a property from JSON in AngularJS with select form

Question

I am stuck AngularJS and JSON. I have view called form.html that allow user can select their province. I created Province JSON file and put in select tag, but when I store mySQL I need a province Id I tried ng-value="province.id" in option tag but doesn't work. How can I get a pid(provinceId) at same time when user select province?

province.JSON

[
    {
    "pid" : 1,
    "name" : "Ontario"
    },
    {
    "pid" : 2,
    "name" : "Québec"
    },
    {
    "pid" : 3,
    "name" : "Nova Scotia"
    },
    {
    "pid" : 4,
    "name" : "New Brunswick"
    },
     ...

form.html

<select name="province" ng-model="user.province" ng-required="true"> 
 <option value="">--- Please select ---</option> 
 <option ng-repeat="province in provinces">{{province.name}}</option>
</select>

controllers.js

$scope.submitForm = function (user) {              
    dataObj = {
        "name": user.name,           //it works and all fine
        "province": user.province,   //it works and all fine
        "telephone": user.telephone, //it works and all fine
        "postalcode": user.postalcode, //it works and all fine
        "salary": user.salary,         //it works and all fine
        "provinceId" : user.pid       // undefine .. 
    }

Answer 1

when user submit select tag will be as object like {"pid:1", "name":"Ontario"} so I can fetch in my controller

The point is I should make as oject.

html file

 <select name="province" ng-model="user.province" ng-options="item.name for item in provinces" class="form-control input-lg" ng-required="true"> 
    <option value="">Select provinces</option>
 <select>

controllers.js

    myFactory.set(user);                 
    dataObj = {
        "name": user.name, 
        "province": user.province.name,   
        "telephone": user.telephone,
        "postalcode": user.postalcode, 
        "salary": user.salary,
        "pid" : user.province.pid
    }

Answer 2

Try this:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.user = {};
    $scope.provinces = [{
                        "pid" : 1,
                        "name" : "Ontario"
                        },
                        {
                        "pid" : 2,
                        "name" : "Québec"
                        },
                        {
                        "pid" : 3,
                        "name" : "Nova Scotia"
                        },
                        {
                        "pid" : 4,
                        "name" : "New Brunswick"
                        }
                      ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
 <select name="contactCountry" ng-model="user.province" ng-options="item.pid as item.name for item in provinces" ><option value="">Select provinces</option>
 </select> 
 <br>
 <p>Selected Province Id = {{user.province}}</p>
</div>

Hope it helps!!.