How to render first element from model class using services and controller in angular js

I have a Class Doctor class. This class has one WebApi controller. I have created 3 scripts namely module.js, service.js, Homecontroller.js.

The question is, I want to display the first item from the model class. I don't want to repeat data, instead I want to display only one data (like FirstName) .and also In the next line I want to display the full name. I haven't written a function for the full name. Please answer how to write a function for full name and first data display

// Model class: Doctor.cs

public class Doctor
    {
        public int Id { get; set; }
        public string Reg_No { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Email { get; set; }
        public string Password { get; set; }
}


Web api controller for Doctor

public class DoctorsAPIController : ApiController
    {
        private DigitalHealthWebContext db = new DigitalHealthWebContext();

        // GET: api/DoctorsAPI
        public List<Doctor> GetDoctors()
        {
            return db.Doctors.ToList();
        }
}

      

        
        
        
      

    

I have 3 scripts

Module.js
var app = angular.module("docModule", ["ngRoute"]);

Service.js
app.service('docService', function ($http) {

    this.getDoctors = function () {
        return $http.get("/api/DoctorsAPI");
    }
})




homeController.js
app.controller('homeController', function ($scope, docService) {
   getFormData();
   function getFormData() {
 var DoctorGet = docService.getDoctors();//The MEthod Call from service
       DoctorGet.then(function (p1) { $scope.LoadDoctor = p1.data },
           function (errorP1) {

               $log.error('failure loading Doctor', errorP1);
           });
   }
});

      

        
        
        
      

    

If I use select controller with ng-Repeat I can get the data.

<select ng-model="Dept" class="dropdown form-control" required id="selectControl">
                                <option value="" disabled selected>Choose speaciality</option>
                                <option ng-repeat="Doctor in LoadDoctor" value="{{Doctor.Id}}">
                                    {{Doctor.firstName}}
                                </option>
                            </select>

      

        
        
        
      

    

but if i write the following code i am not getting data

     <div class="doc-details-block" ng-controller="homeController">
                    <a href="#" ng-model="LoadDoctor">
                        <h2 class="doc-name">
                            {{firstName}}
                        </h2>
                    </a>
                </div>