Edit in JSFiddle

Result
JavaScript
HTML
CSS

// declare a module
var myApp = this.angular.module('myApp', []);

// declare a controller
myApp.controller('baseCtrl', function ($scope, $log) {
    $scope.msg = "Dummy massage comes here";
    //This function will display the messages on the
    //Console panel on IE and Google Chrome, Console 
    //of Firefox's Firebug.
    $scope.showMsg = function(type){
        switch(type){
            case 0:
                $log.log($scope.msg);
                break;
            case 1:
                $log.warn($scope.msg);
                break;
            case 2:
                $log.info($scope.msg);
                break;
            case 3:
                $log.error($scope.msg);
                break;
        }
    }
});

<!-- stitch this with the module declare in Javascript -->
<body ng-app="myApp">
    <div ng-controller="baseCtrl">
        <table>
            <tr>
                <td>Enter a message in the textfield below and<br/>click on anyone of the buttons below it.</td>
            </tr>
            <tr>
                <td> 
                    <span>Message:</span>
                    <input type="text" ng-model="msg"/>
                </td>
            </tr>
            <tr>
                <td>
                    <button ng-click="showMsg(0);">Log</button>
                    <button ng-click="showMsg(1);">Warn</button>                
                    <button ng-click="showMsg(2);">Info</button>
                    <button ng-click="showMsg(3);">Error</button>
                </td>
            </tr>
        </table>
    </div>
</body>

table {
    width:100%;
}

tr {
    width:100%;
}

td {
    width:100%;
    text-align:center;
}