<!DOCTYPE html>
<html ng-app="ng-learn">

  <head>
    <script data-require="angular.js@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="TweetCtrl as t">
      <textarea rows="5" ng-model="t.tweet"></textarea>
      <br>
      
      <p ng-class="{red: t.isTweetMaxed()}">
        {{t.charactersRemaining()}}
      </p>
      
      <button ng-click="t.addTweet()" 
              ng-disabled="t.isTweetMaxed()">
        Tweet
      </button>
      <hr>
      <ul>
        <li ng-repeat="tweet in t.tweetsList">
          {{tweet}}
        </li>
      </ul>
    </div>
  </body>
</html>
var app = angular.module("ng-learn", []);

app.controller("TweetCtrl", function(){
  var tScope = this, maxTweetLength = 140;
  tScope.tweetsList = ["fake tweet 2", "fake tweet 1"];
  
  tScope.resetTweet = function(){
    tScope.tweet = "";
  };
  
  tScope.resetTweet()
  
  tScope.charactersRemaining = function(){
    return maxTweetLength - tScope.tweet.length;
  };
  
  tScope.isTweetMaxed = function(){
    return tScope.charactersRemaining() < 0;
  };
  
  tScope.addTweet = function(){
    tScope.tweetsList.unshift(tScope.tweet);
    tScope.resetTweet();
  };
});
/* Styles go here */

.red {color: red;}