var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
var vm = this;
vm.customers = [
{CID:1, Name:'Bruce Wayne', PIN: '1234', Bal: 10000, cardStatus: '0'},
{CID:2, Name:'Steve Rogers', PIN: '2246', Bal: 90000, cardStatus: '0'},
{CID:3, Name:'Jon Snow', PIN: '2398', Bal: 30000, cardStatus: '1'},
{CID:4, Name:'Rustin Cohle', PIN: '7549', Bal: 45000, cardStatus: '2'}
];
vm.pinFormCheck = function(){
vm.count++;
if(vm.pinForm.$valid && (vm.details.PIN === vm.pin) && (vm.count <= 2)){
console.log('all good'); //change location.
}else{
vm.failPin = true;
console.log('atemps', vm.count);
}
};
});
<!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.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as vm">
<select ng-model="vm.details" ng-options="x.Name for x in vm.customers">
<option value="">Select...</option>
</select>
<h1>you selected {{vm.details.Name}}</h1>
<p>his card status is {{vm.details.cardStatus}}</p>
<hr>
<div ng-switch="vm.details.cardStatus">
<div ng-switch-when="0">
<form name="vm.pinForm">
<input type="password" ng-model="vm.pin" ng-required="true"/>
<p><button ng-disabled="vm.count >=3" ng-click="vm.pinFormCheck();" ng-init="vm.count=0">Proceed</button></p>
<p><span>Attempts left: {{3-vm.count}}</span></p>
</form>
</div>
<div ng-switch-when="1">
<p>This card has been reported as stolen and will be retained. If it is yours, please contact your nearest branch</p>
</div>
<div ng-switch-when="2">
<p>This card has been reported as lost and will be retained. If it is yours, please contact your nearest branch</p>
</div>
<div ng-if="vm.failPin">
<p>Invalid Pin</p>
</div>
<div ng-if="vm.count >=3">
<p>Not Enoguh Attempts</p>
</div>
</div>
</body>
</html>
/* Put your css in here */