title: Cannot read property 'join' of null
body: <p>I'm new to AngularJS, and I don't get what's wrong with my code. Tried many variations, but each time, I'd get the wrong result.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" ng-app="myApp"&gt;
  &lt;head&gt;
      &lt;title&gt;acronyms&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Fredericka the Great"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container-fluid col-sm-4"&gt;
  &lt;h1&gt;Something&lt;/h1&gt;
          &lt;form role="form"&gt;
              &lt;div class="form-group"&gt;
                  &lt;input name="userInput" id="userInput" class="form-control input-normal" placeholder="Enter Text Here" ng-model="userInput"&gt;
                  &lt;br&gt;
              &lt;/div&gt;
              &lt;div&gt;The acronym for "{{userInput}}" is &lt;span main-directive id="result" ng-bind="acronymOutput"&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;script&gt;
          var myApp = angular.module("myApp", []);
          myApp.directive("mainDirective", function(){
              var inputValue = document.getElementById("userInput").value;
              var matches = inputValue.match(/\b(\w)/g);
              var acronymOutput = matches.join("").toUpperCase();
              document.getElementById("result").innerHTML = acronymOutput;
              document.getElementById("userInput").value = ("");
              return {
                  template: ("&lt;h1&gt;" + acronymOutput + "&lt;/h1&gt;")
              };
          })
  </code></pre>