AngularJS Input Modified Example

AngularJS module to detect and indicate input modifications.

HTML

<div ng-app="application">
  <div ng-controller="ApplicationController">
      <form name="myForm" novalidate>
          
        <pre>
            
            Gender pristine: "{{ myForm.gender.$pristine }}"
        </pre>
          
        <div class="form-group">
            <label class="control-label">lenght:</label>
            <div class="control">
                
            </div>
        </div>
                    
        <div class="form-group footer">
            <div class="control buttons">
                <button
                    type="submit"
                    class="btn btn-primary"
                    ng-click="myForm.$setPristine()"
                >Save Form</button>
            </div>
        </div>
          
      </form>
  </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>

<style>

div.footer {
    margin-top: 10px;
}

div.footer button {
    padding: 5px 20px;
}

.form-group {
    margin: 10px;
    padding: 10px;
    border: 1px dashed #AAA;
}

.form-group label {
    color: 000;
    font-size: 13px;
    font-weight: bold;
}

div.radio-inline {
    display: inline-block;
    margin-left: 10px;
}
div.radio-inline:first-child {
    margin-left: 0;
}
div.radio-inline label {
    font-weight: normal;
}

JavaScript

angular.module('application', [])
    .controller('ApplicationController', function($scope) {
        $scope.user = {
            gender: 'unknown'
        };
    })
;