AngularJS Live Example
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<body ng-app="HelloApp" ng-controller="Controller" class="container">
<div class="well">
<a href="#{{letter}}" ng-repeat="(letter,states) in letters">{{letter}} </a>
</div>
<div ng-attr-id="{{letter}}" ng-repeat="(letter,states) in letters">
<h1>{{letter}}</h1>
<h2 ng-repeat="state in states">{{state}}</h2>
<hr>
</div>
</body>
JavaScript
angular.module('HelloApp', [])
.controller('Controller', function ($scope) {
var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyomin'];
// Let's prepare the input
var letters = $scope.letters = {};
states.forEach(function (state) {
var letter = state.charAt(0);
if (!letters[letter]) {
letters[letter] = [];
}
letters[letter].push(state);
});
})