TunJS - AngularJS boilerplate

by kiyanov

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/1.1.1/lodash.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="http://code.angularjs.org/1.0.5/angular-resource.min.js"></script>
<link rel="stylesheet" href="http://cdn.ensialumni.com/themes/default/components/bootstrap/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.ensialumni.com/themes/default/components/bootstrap/bootstrap/css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="http://cdn.ensialumni.com/themes/default/components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="http://cdn.ensialumni.com/themes/default/main.css">
<div ng-app="app">
    <div ng-controller="ctrlr">
        
        
        <not-awesome></not-awesome>
</div>

CSS

body { margin: 20px; }

JavaScript

var app = angular.module('app', [])

.controller('ctrlr', function($scope){
    $scope.myModel = "test";
    $scope.availableCharacters = 5;
    $scope.$watch('myModel', function(newValue, oldValue){
        if(!newValue){
            return;
        }
        if(newValue.length > 5){
             $scope.cutString();       
         }
    });
    $scope.cutString = function(){
        var length = $scope.myModel.length;
        var string = $scope.myModel.slice(0, $scope.availableCharacters);
        var countStars = length - string.length;
        $scope.myModel = $scope.createStars(string, countStars);
    }
    $scope.createStars = function(string, countStars){
        for(var i = 1; i <= countStars; i++){
                string = string+'*';
            }
        
        return string;
    }
})
.directive('notAwesome' , function(){
    return {
        restrict:'E',
        template:'<input type="text" ng-model="myModel" ng-value="myModel | filter:my" />'
    }
})
/*.filter('my', function(){
    return function(){
       //Here I want to keep my code
    } 
});*/