JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="upperApp">
  <span ng-controller="ctrl">
    <!-- This works: -->
    <input type="text" ng-model="mac" ng-change="upper(mac)">
    <!-- this does not when you add ng-pattern -->
    <input type="text" ng-model="mac" ng-change="upper(mac)" ng-pattern="mac_regex">
  </span>
</div>

JavaScript

var app = angular.module('upperApp', [])
app.controller('ctrl', function($scope) {
  $scope.mac_regex = '^([0-9A-F]{2}){6}$'; // MAC Address regex for validation
  $scope.upper = function(mac) {
    $scope.mac = mac.toUpperCase(); // Make every character uppercase
  }
});

// Should I use a filter like this?  $filter('uppercase')();
// As described on Angular's site https://docs.angularjs.org/api/ng/filter/uppercase