Angular Material Dialog: Set focus on the first item

I'm using Angular 1.5.x with Material Design and I've got a custom Dialog box in which I would like to select the first input field when the dialog is shown.

How do I do this?

I've put together a live example of the problem: https://codepen.io/anon/pen/xdoqmZ?editors=1010

Here is the code;

  $mdDialog.show({
    parent: parentEl,
    targetEvent: $event, // determines source location of the dialog
    template:
            ' <md-dialog>' +
        '   <md-content>Hello {{ username }}!</md-content>' +
        '   <div class="md-actions">' +
        '     <form>' + 
        '       <div>Given names: <input /></div>' +
        '       <div>Surname:  <input /></div>' +
        '       <div>Address:  <input /></div>' +
        '       <div>Building: <input /></div>' +
        '       <div>Level:    <input /></div>' +
        '       <div>Street:   <input /></div>' +
        '       <div>Suburb:   <input /></div>' +
        '       <div>Postcode: <input /></div>' +
        '       <div>Country:  <input /></div>' +
        '       <div>State:    <input /></div>' +
        '       <div>ABN:      <input /></div>' +
        '       <div>' +
        '         <md-button ng-click="closeDialog()">' +
        '           Close Greeting' +
        '         </md-button>' +
        '       </div>' +
        '     </form>' +
        '   </div>' +
        ' </md-dialog>',
    onComplete: onCompleteAnimation,
    locals: {
      name: $scope.username
    },
    controller: DialogController
  });

In this example I would like the dialog to appear with the Given Names focused.