JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<form name="myForm" ng-submit="submit()" novalidate>First Name:
<input type="text" ng-model="Data.FirstName" required>
<br>Last Name:
<select ng-model="Data.LastName" required>
<option value=""></option>
<option value="Bigglesworth">Bigglesworth</option>
<option value="Burgermeister">Burgermeister</option>
</select>
<br>
<input type="submit" value="Submit" ng-disabled="myForm.$invalid" />
</form>
</div>
</div>
JavaScript
var myApp = angular.module('myApp', []);
myApp.factory('Data', function () {
return {
FirstName: '',
LastName: ''
};
});
myApp.controller('FirstCtrl', function ($scope, Data) {
$scope.Data = Data;
$scope.submit = function () {
console.log('you just submitted, foolio: ' + Data.FirstName + " " + Data.LastName);
}
});
myApp.directive("select", function () {
return {
restrict: "E",
require: "?ngModel",
scope: false,
link: function (scope, element, attrs, ngModel) {
if (!ngModel) {
return;
}
element.bind("keyup", function () {
element.trigger("change");
})
}
}
})