Color picker with input validation

Color picker input field that has a border bound to the color you put in the field. The submit button is disabled unless you have a valid hex code.

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="wrapper" ng-app="app" ng-controller="appCtrl">
    <input type="text" class="color-picker" ng-style="{ 'border-color': 'green' }" placeholder="#FF0000 or #F00" />
</div>

CSS

html, body {
    margin: 0;
    box-sizing: border-box;
}
.color-picker {
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
    transition: color 0.3s ease;
}
.color-picker:focus {
    box-shadow: none;
    outline: none;
}

JavaScript

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

app.controller('appCtrl', function($scope) {
    $scope.$watch('color', function(newValue, oldValue, scope) {
       /* console.log("isValidHex",newValue) */
   /*       scope.canSubmit = isValidHex(newValue); */ 
    });
/*  function isValidHex(code) {
       console.log("code",code)
        var isValid = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(code);
        console.log("isValidHex>>>>>",isValid)
        return isValid;
    }  */
});