<html ng-app="ngApp">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js" type="javascript"></script>
  </head>
  <body ng-controller="sampleCtrl">
    <textarea type="text" ng-change="alternateSmallCaps()" ng-model="msg.input" rows="10" cols="100">
    </textarea>
    <div>
      {{msg.output}}
    </div>
  </body>
</html>
/* Convert everything to lowercase.
*  Loop till length - 1
*  For every odd index: if it is an alphabet convert to upper case
*   if it is non-alphabet add as it is.
*/

angular.module('ngApp',[])
.controller('sampleCtrl', function($scope) {
  
  $scope.msg = {};
  $scope.msg.input = "This is sample message";
  
  $scope.alternateSmallCaps = function() {
    var input = $scope.msg.input.toLowerCase();
    var output = '';
    for(i=1;i<input.length;i=i+2) {
      output += input[i-1];
      isAlpha(input[i]) ? output += input[i].toUpperCase() : output += input[i];
   }
    $scope.msg.output = output
  };
  
  // To set output 
  $scope.alternateSmallCaps();
});


function isAlpha(str) {
  if (str.charCodeAt() >= 97 && str.charCodeAt() <=122) 
    return true;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js