JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<body ng-app>
    
    <div ng-controller="PayslipCtrl">
        
        <span class="line-title">Pay Period:</span>
        <span class="line-value">
            <span>{{getPeriod()}}</span>
            <a href="#" ng-click="dateBackward()"> << </a>
        </span><br/>
        
    </div>

</body>

JavaScript

function PayslipCtrl($scope, $http) {

    $scope.period = '2011 - 2012';

    $scope.getPeriod = function(){
        return $scope.period;
    };

   
    
    $scope.dateBackward = function(){
        $http.get('/echo/json/').success(function(data){
            $scope.period = '2010 - 2011';
        });                      
    };
        
    $scope.$watch('foo', function(fooValue){
        if (fooValue === $scope.bar){
            $scope.foo = 'a';
        }
    });
}