var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.jobs = [{
id: 1,
jobName: "1"
},{
id: 2,
jobName: "2"
},{
id: 3,
jobName: "3"
}]
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.3.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js" data-semver="1.3.7"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="schedulerForm" class="form-horizontal">
<div class="row">
<div class="col-lg-12 col-md-12" ng-class="{'has-error' : schedulerForm.jobName.$invalid && !schedulerForm.jobName.$pristine }">
<h4 class="text-center">Assign Job Schedule</h4>
<select class="form-control" ng-change="getJobDetail(filterType)"
ng-model="filterType" id="jobName" required name="jobName">
<option value="">Select Job</option>
<option value="{{job.id}}" ng-selected="filterType == job.id"
ng-repeat="job in jobs" ng-disabled="jobStatus">{{job.jobName}}</option>
</select>
</div>
</div>
<button type="button" class="btn btn-primary"
ng-click="assignSchedule()" ng-disabled="schedulerForm.$invalid">Save</button>
</form>
</body>
</html>
/* Put your css in here */