Angular ng-repeat. Looping through the letters in string - angularjs

Question

I'va just started learning Angular and can't manage an issue with ng-repeat.
I want to display every letter from input in a single span element. I tried many ways but nothing works.
Here's my code on codepen

Answer 1

Is this what you're looking for ?
Each letter will be printed in different span.
solution of Error: ngRepeat:dupes
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
});
.center-block {
float: none;
}
input {
margin: 20px;
}
span:hover {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl" class="container">
<div class="col-sm-10 center-block text-center">
<input type="text" class="form-control" placeholder="Type to search..." ng-model="word" />
<div ng-repeat="letter in word.split('') track by $index">
<span> {{ letter }} </span>
</div>
<br/><br/> If you want to split the word by line <br/><br/>
<div ng-repeat="letter in word.split(' ') track by $index">
<span> {{ letter }} </span>
</div>
</div>
</div>

Answer 2

You need to reference the alias Letter as opposed to Word
<div ng-app="myApp" ng-controller="myCtrl" class="container">
<div class="col-sm-10 center-block text-center">
<input type="text" class="form-control" placeholder="Type to search..." ng-model="word" />
<div ng-repeat="letter in word.split('') track by $index">
<span> {{letter }} </span>
</div>
</div>
</div>
EDIT
Apparently what is happening is word.split('') is not allowing any duplicates.
"thisisatest".split('') if this is input into the console, it splits you expect it to. I dont understand why word.split('') is removing duplicates. Type a string with unique chars into your codepen and it will display correctly.
EDIT
per p2. answer the track by $index tracks all duplicates. which fixes the issue. The split is resulting in duplicate items in an array and without track by $index angular is just not displaying the duplicates

Answer 3

You should also be using track by $index with ng-repeat to deal with Duplicate Key in Repeater
<div ng-app="myApp" ng-controller="myCtrl" class="container">
<div class="col-sm-10 center-block text-center">
<input type="text" class="form-control" placeholder="Type to search..." ng-model="word" />
<div ng-repeat="letter in word.split('') track by $index">
<span> {{letter }} </span>
</div>
</div>
</div>