autofocus in angular js form

[Priti_P]

I am trying to autofocus the form's first field.
but not able to.

My scenario is,
in first load it shows table with data.On this page a <a> link is given which does nothing but showForm="true" which shows form for adding data.
Code is as below:

// controller side

angular.module('degreeCtrl', ['ui.bootstrap'])
    // inject the degree service into our controller
    .controller('degreeController', function($scope, $http, Degree,$filter, ngTableParams,$localStorage) {
        // object to hold all the data for the new degree form
        $scope.$storage=$localStorage;
        $scope.degreeData = {};

        // loading variable to show the spinning loading icon
        $scope.loading = true;
        $scope.showForm = false;
        $scope.isfocus=true;
        // 
        //....
        //....
        // etc
});

on UI side:

<div ng-app='degreeApp' ng-controller='degreeController' ng-click="resetSession();" ng-cloak>
        <div  class='page-lable'>Degrees </div>
    <div ng-show='!showForm' style='margin-top:10px;'>
    <div>
        <a href='#' id="testlink" ng-click='showForm=true;isfocus=true;resetSession(); resetForm();' class='Add-record-button'><b>Add Degree </b></a>
    </div>
    <table ng-table="tableParams" show-filter="true" class="table" template-pagination="custom/pager">
        <tr ng-repeat="degree in $data">
            // table code
        </tr>
    </table>
</div>

<div name='DegreeForm' ng-show='showForm'> 
    <div>
<a href='#' ng-click='showForm=false'  class='Add-record-button'><b>Back</b></a>
</div>
<br>
<form name='SubmitDegree' class='simple-form'>
    <div>
        <span class="lable">Degree Name</span>
        <input type="text" name="degree_name" id="degree_name_id" ng-model="degreeData.degreeName" required autofocus ng-pattern="/^([a-zA-Z]+\s*)*[a-zA-Z]+$/" placeholder="Degree Name"/>
        <span ng-show="SubmitDegree.degree_name.$error.pattern">
            Please enter valid Name.
        </span>
    </div>
    <br>
    <div>
        <input type="Submit"  value="Submit" ng-click='saveDegree(degreeData)' style='margin-left:255px;height:30px;'  ng-disabled="SubmitDegree.$invalid "/>
        <input type="Reset" ng-click='resetDegree(degreeData)' ng-disabled="!SubmitDegree.$dirty" style='height:30px;'  />
    </div>
</form>
</div>

what above code does is:
on back button it hides data enter form and shows table
and on Add is shows form and hide table.

but how can i make it autofocus on first field of form?
i tries everything like using .directive
data[0] focus
any suggestions please.

[Traevel]

$("#degree_name_id").focus(); will set focus in jQuery.

document.getElementById("degree_name_id").focus(); will set focus the old fashioned way.

[Priti_P]

@Traevel: Thanks
I had tried that too.

It was not working.

[Traevel]

Have you tried attaching the call to the link you click to show the form?

If you're looking for a true angular approach you could have a look at this very interesting response on a similar question.

I don't know angularJS, but I know the HTML5 autofocus attribute is fairly new and you might not be using an up-to-date browser. Here's a link that will tell you which versions of the five big browsers support autofocus:
http://www.w3schools.com/tags/att_input_autofocus.asp

You could also try <input type="text" autofocus="autofocus">. At least you'll exhaust one more possibility.