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

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

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

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

app.controller('homeController', function ($scope, docService) {
   function getFormData() {
 var DoctorGet = docService.getDoctors();//The MEthod Call from service
       DoctorGet.then(function (p1) { $scope.LoadDoctor = },
           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}}">


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">



source to share

1 answer

This issue stems from trying to get the firstName property in an array with doctors.

You can try to improve it by following the script, but it would be much better to have a specialized property that holds the doctor (and again, it is better to have a dedicated service call because it is clearer and faster)

    <div class="doc-details-block" ng-controller="homeController">
        <a ng-if="LoadDoctor.length > 0" href="#">
            <h2 class="doc-name">
                {{ LoadDpctor[0].firstName }}




All Articles