Untitled

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script data-require="angular.js@1.6.0" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
    
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
  </head>

  <body ng-app="myApp">
    <div ng-controller="TestCtrl as testCtrl">
      <form name="testCtrl.testForm">
        
        
        <div class="form-group" data-toggle="buttons">
          <label class="control-label">Gender</label>
          <br>
          <div class="form-group">
            
            <label
              class="btn btn-default has-feedback"
              name="sex"
              ng-model="testCtrl.modelValues.sex"
              uib-btn-radio="'M'"
              required>Male
            </label>
            
            <label
              class="btn btn-default has-feedback"
              name="sex"
              ng-model="testCtrl.modelValues.sex"
              uib-btn-radio="'F'"
              required>Female
              <span ng-class="
                {'glyphicon radioboxglyph glyphicon-ok': testCtrl.sexValid === true,
                'glyphicon radioboxglyph glyphicon-remove': testCtrl.sexValid === false,
                'glyphicon radioboxglyph glyphicon-warning-sign': testCtrl.sexValid === null}"></span>
            </label>
            
          </div>
        </div>
      </form>
      
    </div>
  </body>

</html>

/* Styles go here */

var app = angular.module('myApp', []);

app.controller('TestCtrl', function($scope) {
  var self = this;
  self.modelValues = {
    sex: null
  }
  
  self.sexValid = null;
  
  $scope.$watch('testCtrl.testForm.sex.$valid', function (validity) {
    console.log('validity:', validity);
    self.sexValid = self.testForm.sex.$valid;
  });
  
  // self.modelValues = {
  //   sex: 'F'
  // }
});