Angularjs enable checkbox when click on href - angularjs

Question

I want to enable checkbox when click on
Google
My html code is given below
<div class="wrapper">
<div class="container">
<section class="main-ctr">
<div class="error-msg" ng-show="showError">
<div class="text">Please fix the validation error(s) below and try again</div>
</div>
<div class="error-msg" ng-show="serviceErrorMsg">
<div class="text">{{serviceErrorMsg}}</div>
</div>
<header class="security-header">
<img src="images/lock.png" alt="Security" class="security">
</header>
<main class="sm-main">
<section class="fix-section security">
<h1>Security and privacy is important to us </h1>
<p>Please read the Google</p>
<label class="control control--checkbox m-t-45">I confirm that I have read, understood and agree to
the above
<input type="checkbox" ng-model="terms.agreed"/>
<div class="control__indicator"></div>
</label>
<span class="error" ng-if="showError">Please select checkbox</span>
</section>
<div class="clear"></div>
<div class="button-ctr">
<button class="button" ng-class="terms.agreed ? 'active' : 'disable'" ng-click="proceed()">Agree</button>
</div>
</main>
</section>
</div>
</div>
<div id="loading" ng-if="showLoader">
<img src="images/loader.gif" id="loading-image">
</div>
My controller code is given below
.controller('agreementCtrl', ['$rootScope', '$scope', '$state', '$window', 'globalService', 'dataServices', function ($rootScope, $scope, $state, $window, globalService, dataServices) {
$scope.terms = {
agreed: false
}
$scope.showLoader = false;
$scope.proceed = function () {
if (!$scope.terms.agreed) {
$scope.showError = true;
return;
}
$scope.showLoader = true;
}
}
So I want that when anyone click on Google link only after that my checkbox has to be enable.

Answer 1

You can have an variable and an event handler function in the controller like
$scope.isLinkClicked = false;
$scope.onLinkClick = function(){
$scope.isLinkClicked = true;
}
And on the a attach an event handler and use ng-disabled directive on the input
<a href="https://www.google.com" target="_blank" ng-click="onLinkClick()" >Google</a>
<input type="checkbox" ng-model="terms.agreed" ng-disabled="!isLinkClicked"/>
Working example
var app = angular.module('app', []);
app.controller('MyCtrl', ['$scope', function($scope){
$scope.isLinkClicked = false;
$scope.onLinkClick = function(){
$scope.isLinkClicked = true;
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<a href="https://www.google.com" target="_blank" ng-click="onLinkClick()" >Google</a>
<input type="checkbox" ng-model="terms.agreed" ng-disabled="!isLinkClicked"/>
</div>