Calling a function from ng-options

var app = angular.module('plunker', ['ngSanitize']);

app.controller('DemoCtrl', function($scope) {
    
});

app.directive('providerList', ['$http', function($http) {
    return {
        restrict: 'A',
        replace: true,
        template: '<select class="span4" name="barber-options" id="barber-options" ng-model="registerData.barber_options" ' +
            'ng-options="(provider.username + \' \' + provider.first_name) for provider in providerData">' + 
            '<option value="" selected>Please choose a Barber</option></select>',
        link: function(scope, element, attrs) {
          
          data = [
            { first_name : "Joe", username: "BillyDaKid" },
            { first_name : "Jack", username: "JackTheRipper" }
          ];

          scope.providerData = data;
            
          scope.formatProviderName = function(p) {
            return p.username + ' ' + p.first_name;  
          }
        } 
    };
}]);

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js" data-semver="1.2.1"></script>
    <script  src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-sanitize.js" data-semver="1.2.1"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="DemoCtrl">
  
    <div class="control-group">
         <!-- This directive will be replaced by a provider drop down -->
         <p>
         <span provider-list></span>
         </p>
         
         <p>
         <div ng-repeat='p in providerData'>
         {{ p.first_name + ' ' + p.username}}
         </div>
         </p>
     </div>
  
    
  </body>

</html>

/* Put your css in here */