title: AngularJS - trying to create custom directive for url slug
body: <p>I'm new to Angular and trying to figure out how to watch for a title to be entered in an input so that I can use the value for a url slug.</p>
  
  <p>I am trying to create a custom directive, but am unsure how to watch for when the title field has input. </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;input ng-model="post.title" type="text" class="form-control"&gt;&lt;/br&gt;
  &lt;slug&gt;&lt;/slug&gt;
  </code></pre>
  
  <p><strong>Slug directive</strong></p>
  
  <pre><code>Posts.directive('slug', function() {
      return {
          restrict: 'E',
          scope: {},
          link: function(scope, element, attrs) {
              scope.$watch('post.title', function() {
                  console.log('title has been entered');
              });
          }
      }
  });
  </code></pre>
  
  <p>This returns 'title has been entered' immediately in the console log after refreshing the page, which isn't what I want.  </p>
  
  <p>Also, I don't want to completely bind the title and slug as one model, I want to capture the value that is initially typed into the title field and then use it as the slug, but allow the slug to be edited as its own model value.</p>
  
  <p>Thanks for any advice, I've been stuck on this for awhile.</p>