Angular onChange Event

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

app.controller('MainCtrl', function($scope) {
  
  $scope.calendars = [ 
  	{code: 'ryancmartin1976@gmail.com', name: 'primary'}, 
  	{code: 'ib1am677vqld7nct8rpjhjs9es@group.calendar.google.com', name: 'HealthShare Team PTO'},
  	{code: 'isom9j3bclic38hiv1p4q6uqhk1fi90a@import.calendar.google.com', name: 'My Meetups'},
  	{code: '4m34b5k6hf613caj8cj35s3oi4@group.calendar.google.com', name: 'Ryans Workspace'},
  	{code: '#contacts@group.v.calendar.google.com', name: 'Birthdays'},
  	{code: 'en.usa#holiday@group.v.calendar.google.com', name: 'Holidays in United States'}
  ];
  
  $scope.selectedTemplate = function() {
    var currentItem = this.selectedItem;
    console.log('Calendar ID is : '+ JSON.stringify(currentItem));
  }

});

<!DOCTYPE html>
<html ng-app="plunker">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.2.19" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js" data-require="angular.js@1.2.x"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <select ng-options="calendar as calendar.name for calendar in calendars" ng-change="selectedTemplate()" ng-model="selectedItem"></select>
    <br />
    
    <pre>Selected Value:
{{ selectedItem | json}}
    </pre>
  </body>

</html>

/* Put your css in here */