JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="MyApp">
    <div ng-controller="MyController">
         <h3>Cancel Button Will Submit</h3>

        <form ng-submit="submitTheForm()">
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" class="form-control" ng-model="someone.name" id="name" placeholder="Enter name"></input>
            </div>
            <button class="btn btn-default" ng-click="cancel()">Cancel</button>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <hr />
        <h3>Cancel Button Will not Submit</h3>
        <form ng-submit="submitTheForm()">
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" class="form-control" ng-model="someone.name" id="name" placeholder="Enter name"></input>
            </div>
            <button type="button" class="btn btn-default" ng-click="cancel()">Cancel</button>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <hr />        
        <h3>Cancel Button Will not Submit / but without Form tag</h3>
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" class="form-control" ng-model="someone.name" id="name" placeholder="Enter name"></input>
            </div>
            <button type="submit" class="btn btn-default" ng-click="cancel()">Cancel</button>
            <button type="submit" class="btn btn-default" ng-click="submitTheForm()">Submit</button>
    </div>
</div>

JavaScript

angular.module('MyApp', [])

.controller('MyController', function($scope) {
    $scope.submitTheForm = function () {
        var name = $scope.someone.name || 'No Name';
        alert("Submitted the form of " + name + "!");
    }
    $scope.cancel = function () {
        $scope.someone = {};
    }
})



;