Angular: Empty Fiddle

http://angularjs.org/

HTML

<div ng-controller="MyCtrl" id="main">
    <h1>Manual Base64 Decoder</h1>
    <p><textarea placeholder="Enter Base64 String" ng-model="base64" cols="80" autofocus></textarea></p>
    <p>▼</p>
    <p><button ng-click="loadBase64Character()">Load Base64 Character</button></p>
    <p>▼</p>
    <p><input type="text" ng-model="base64char" size="1" readonly></p>
    <p>▼</p>    
    <p><button ng-click="convertToBits()">Convert Base64 Character to 6 Bits</button></p>
    <p>▼</p>
    <p><input type="text" ng-model="base64bits" size="6" readonly></p>
    <p>▼</p>    
    <p><button ng-click="appendBit()">Append Bit to Byte Buffer</button></p>
    <p>▼</p>
    <p><input type="text" ng-model="bytebuffer" size="8" readonly></p>
    <p>▼</p>    
    <p><button ng-click="makeCharacter()">Convert 8 Bits to Character</button></p>
    <p>▼</p>
    <p><input type="text" ng-model="character" size="1" readonly></p>
    <p>▼</p>    
    <p><button ng-click="appendOutput()">Append Character to Output</button></p>
    <p>▼</p>
    <p><textarea placeholder="Output Appears Here" ng-model="output" cols="80" readonly></textarea></p>
</div>

CSS

body {
    padding-top: 20px;
}

h1 {
    font: 28pt Monospace;
    margin-bottom: 20px;
}

p {
    padding: 2px;
}

#main {
    text-align: center;
}

input[type=text] {
    font: 18pt Monospace;
    padding: 10px;
}

textarea {
    font: 18pt Monospace;
    padding: 10px;
}

JavaScript

var myApp = angular.module('myApp',[]);

var base64map = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";

function MyCtrl($scope) {
    $scope.base64 = 'aHR0cDovL3d3dy5hbWF6b24uY2EvSkVUX0ZVRUxfQ0FOVF9NRUxUX1NURUVMX0JFQU1TL2RwLzE0MTY1NzE3Mjg=';
    $scope.base64char = '';
    $scope.base64bits = '';
    $scope.bytebuffer = '';
    $scope.character = '';
    $scope.output = '';
    
    $scope.loadBase64Character = function() {
        if($scope.base64.length == 0) {
            $scope.restart("Error!  Base64 string is empty!");
            return;
        }
        
        if($scope.base64char.length > 0) {
            $scope.restart("Error!  Character buffer not empty!");
            return;
        }
        
        $scope.base64char = $scope.base64.substring(0, 1);
        
        /* We skip =. */
        if($scope.base64char == '=') {
            alert("Padding character discarded.");
            $scope.base64char = '';
        }
        
        /* Consume. */
        $scope.base64 = $scope.base64.substring(1, $scope.base64.length);
    }
    
    $scope.convertToBits = function() {
        if($scope.base64char.length != 1) {
            $scope.restart("Error!  No character loaded for conversion.");
            return;
        }
        
        if($scope.base64bits.length > 0) {
            $scope.restart("Error!  6 bit buffer not empty!");
            return;
        }
        
        $scope.base64bits = base64map.indexOf($scope.base64char).toString(2);
        
        /* Pad to 6 bits in length. */
        var padding_len = 6 - $scope.base64bits.length;
        for(var i = 0; i < padding_len; i++) {
            $scope.base64bits = '0' + $scope.base64bits;
        }
        
        /* Consume. */
        $scope.base64char = '';
    }
    
    $scope.appendBit = function() {
        if($scope.bytebuffer.length >= 8) {
            $scope.restart("Error!  Byte buffer can only have 8 bits.");
            return;
        }
        
    ...