Break Apart Text

by Marcus Baptiste

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
<div ng-app="breaker" ng-controller="breakerCtrl">
  <p>
    Texto: <input type="text" ng-model="breakText" ng-change="breakApart()">
  </p>
  <div ng-repeat="letter in letters track by $index" class="letter">{{ letter }}</div>
</div>

CSS

.letter {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid green;
  margin: 0 5px;
}

JavaScript

var app = angular.module('breaker', []);
app.controller('breakerCtrl', function($scope) {
  $scope.breakText = "";
  $scope.letters = [];
  $scope.breakApart = function() {
    var i, len = $scope.breakText.length;
    $scope.letters = [];
    for (i = 0; i < len; i++) {
      $scope.letters.push($scope.breakText.charAt(i));
    }
  };
});