JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app">

    <form name="createEventForm" data-ng-controller="Ctrl">
        <fieldset>
            <div class="input-prepend">
                <span class="add-on">www.blah.com/</span>
                <input restrict="[^a-z0-9\-\s]" data-ng-model="slug" ng-change="auto_slug()" id="prependedInput" type="text" placeholder="event-url" required>
            </div>
            
            <input type="text" placeholder="etc...">
        </fieldset>
    </form>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.angularjs.org/angular-1.0.0rc5.min.js"></script>
<style>

JavaScript

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

function Ctrl($scope) {
    // automatically creates an event slug from the provided event name
    $scope.auto_slug = function() {        
        console.log($scope.slug);

    };
}

app.directive('restrict', function($parse) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, iElement, iAttrs, controller) {
            scope.$watch(iAttrs.ngModel, function(value) {
                if (!value) {
                    return;
                }
                $parse(iAttrs.ngModel).assign(scope, value.toLowerCase().replace(new RegExp(iAttrs.restrict, 'g'), '').replace(/\s+/g, '-'));
            });
        }
    }
});