AngularJS: model is not binding - angularjs

Question

I am using Angular Modal and when I send the input to the modal and set the scope variable, I cannot see the binding happening.
Here is the code:
Note: I am yet to implement the close function in the controller for the modal.
Code for showing the modal:
$scope.approveReq = function (id) {
ModalService.showModal({
templateUrl: "/app/mis/jobno/createjno.html",
controller: "CreateJnoCtrl",
inputs: { input: id }
}).then(function (modal) {
// The modal object has the element built, if this is a bootstrap modal
// you can call 'modal' to show it, if it's a custom modal just show or hide
// it as you need to.
modal.element.modal();
modal.close.then(function (result) {
$scope.message = result ? "You said Yes" : "You said No";
});
});
};
HTML of the modal
<div id="jobcreate" class="modal" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<form name="jobcreate">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Create a new Job</h4>
</div>
<div class="modal-body">
<fieldset class="form-group row">
<label for="iBranchId" class="col-sm-2 form-control-label">Branch</label>
<div class="col-sm-4">
<select class="form-control" ng-required="true" ng-model="jobno.BranchId" id="iBranchId">
<option ng-repeat="b in branches" value="{{b.org_id}}">{{b.org_location}}</option>
</select>
</div>
<label for="iJobType" class="col-sm-2 form-control-label">Job Type</label>
<div class="col-sm-4">
<select class="form-control" style="width:250px" ng-required="true" ng-model="jobno.iJobType" id="iJobType">
<option ng-repeat="jt in jobTypes" value="{{jt.iJobTypeId}}">{{jt.vJobType}}</option>
</select>
</div>
</fieldset>
<fieldset class="form-group row">
<label for="ClieintId" class="col-sm-2 form-control-label">Customer</label>
<div class="col-sm-4">
<select class="form-control" id="ClieintId" ng-required="true" ng-model="selClient" ng-change="getlocs()">
<option ng-repeat="c in clientList" value="{{c.Id}}">{{c.Name}}</option>
</select>
</div>
<label for="vClientLoc" class="col-sm-2 form-control-label">Location</label>
<div class="col-sm-4">
<select class="form-control" id="vClientLoc" ng-required="true" ng-model="jobno.vClientLoc">
<option ng-repeat="l in clientLocs" value="{{l.Loc_Id}}">{{l.Loc_Name}}</option>
</select>
</div>
</fieldset>
<fieldset class="form-group row">
<label for="ContractId" class="col-sm-2 form-control-label">Contract No</label>
<div class="col-sm-4">
<select class="form-control" ng-required="true" ng-model="jobno.ContractId" id="ContractId" ng-options="c.Contract_Id as (c.Contract_No) for c in contracts"></select>
</div>
<div class="col-sm-6" ng-show="createdJobNo">{{createdJobNo}} Created!</div>
</fieldset>
</div>
<div class="modal-footer">
<div class="btn-group">
<button type="button" id="createJobNo" ng-if="!jobcreate.$pristine" ng-disabled="jobcreate.$invalid" class="btn btn-success" ng-click="createJobNo()">Create Job Number</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</form>
</div>
</div>
</div>
Controller for the modal
angular.module('trg-app.mis').controller('CreateJnoCtrl', ['$http', '$scope', 'ClientDataService', 'input', 'close', function ($http, $scope, ClientDataService, input, close) {
//create Job No
//Get input if any
$scope.jobReq;
//Empty Job
$scope.jobno = {
iJobType: null,
vClientLoc: null,
vJobNo: null,
iRefJobNo: 0,
vRemark: null,
ContractId: 1,
UpdatedBy: 1,
BranchId: null
};
if (input != undefined) {
$scope.jobReq = input;
console.log("Input Received for JobReq: ", input);
$scope.jobno = {
iJobType: $scope.jobReq.Job_Type,
vClientLoc: $scope.jobReq.Client_Location,
vJobNo: null,
iRefJobNo: 0,
vRemark: null,
ContractId: 1,
UpdatedBy: 1,
BranchId: $scope.jobReq.Org_Location
};
}
else {
$scope.jobno = {
iJobType: null,
vClientLoc: null,
vJobNo: null,
iRefJobNo: 0,
vRemark: null,
ContractId: 1,
UpdatedBy: 1,
BranchId: null
};
}
$scope.branches;
$scope.getBranches = function () {
$http.get("/api/orgdetails/").then(
function (resp) {
console.log(resp);
$scope.branches = resp.data;
},
function (err) {
console.log("Error: ", err);
}
);
};
$scope.getBranches();
$scope.jobTypes = {};
$scope.getJobTypes = function () {
console.log("getting Job Types");
$http.get('/api/jobtypes/').then(
function (resp) {
console.log('Response: ', resp);
$scope.jobTypes = resp.data;
},
function (err) {
console.log("Error: ", err);
}
);
};
$scope.getJobTypes();
$scope.clientList;
//get minimal client list and bind to the side bar
$scope.getClients = function () {
ClientDataService.GetClientList()
.then(function (response) {
$scope.clientList = response;
});
};
$scope.getClients();
$scope.clientLocs;
$scope.selClient;
//locs should be brought in when we go to the location editing
$scope.getlocs = function () {
console.log("$scope.selClient: ", $scope.selClient)
if ($scope.selClient != undefined) {
ClientDataService.GetClientLocs($scope.selClient)
.then(function (response) {
$scope.clientLocs = response;
});
$scope.getContracts($scope.selClient);
}
};
//$scope.getlocs();
$scope.contracts;
$scope.getContracts = function (ClientId) {
$http.get('/api/Contracts/client/' + ClientId).then(
function (response) {
$scope.contracts = response.data;
},
function (error) {
console.log("Error getting contracts: ", error);
}
);
};
$scope.createdJobNo;
$scope.createJobNo = function () {
if ($scope.jobno) {
$scope.createdJobNo = null;
console.log($scope.jobno);
$http.post('/api/jobnos/', $scope.jobno).then(
function (response) {
console.log("Job Created: ", response.data.vJobNo);
//$scope.jobno.vJobNo = response.data.vJobNo;
$scope.createdJobNo = response.data.vJobNo;
//TODO: if Job is created from Req, update additional info
//$scope.initJCreate();
},
function (error) {
console.log("Error!");
}
);
}
};
}]);