How to make input text disabled until edit button is clicked in AngularJS?

Question

I have created an edit button and a form. I can't get my input disabled until edit button is clicked.
All I want to do is make input disabled and when the user clicks on the edit button they should be able to edit the text.

Here is my code:

<div ng-controller="MyCtrl">
    <a class="edit" ng-click="inactive = !inactive">Edit</a>

    <form>
        <b>First Name:</b>
        <input type="text" ng-disabled="inactive" ng-model="input1" value="John">
        <br>
        <b>Last Name:</b>
        <input type="text" ng-disabled="inactive" value="Smith">
        <br>
        <b>Email:</b>
        <input type="email" ng-disabled="inactive" value="[email protected]">
    </form>
</div> 

App.js

function MyCtrl($scope) {
    $scope.inactive = false;
} 

Answer 1

You can add ng-click="changeStatus()" in you angular template.

the full code:

var app = angular.module("Portal", ['ngRoute']);
app.controller('MyCtrl', ['$scope', function($scope) {
   $scope.inactive = true;
   $scope.changeStatus = function() {
      $scope.inactive = !$scope.inactive;
   };
}]);