JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div ng-app="">
    <form class="form-horizontal" role="form" ng-controller="ExchangeController">
        <!-- Name -->
        <div class="form-group">
            <label>Name</label>
            <div class="col-sm-6">
                <input type="text" class="form-control italic" ng-class="{'edit': editable}" ng-model="name" ng-disabled="editable === false" />
            </div>
        </div>
        <!-- Email -->
        <div class="form-group">
            <label>Email</label>
            <div class="col-sm-6">
                <input type="email" class="form-control italic" ng-class="{'edit': editable}" ng-model="email" required ng-disabled="editable === false" />
            </div>
        </div>
        <!-- Submit -->
        <div class="form-group">
            <div class="col-sm-offset-8 col-sm-6">
                <button type="button" class="btn btn-success" ng-click="editSettings()">Edit</button>
            </div>
        </div>
    </form>
</div>

CSS

body {
    padding: 20px;
}

/* This CSS rule is added statically with class='...' */ 
.italic {
    font-style: italic;
}

/* This CSS rule is added dynamically with ng-class, if $scope.editable is true */
.edit {
    border: 1px solid green;
}

JavaScript

function ExchangeController($scope, $http) {

    $scope.editable = false;

    $scope.name = 'Name';
    $scope.email = '[email protected]';

    // Function bound to the click event 
    // of the 'Edit' button
    $scope.editSettings = function () {
    
        $scope.editable = true;
    };
}