How to foreach angularjs php array json output

Question

I'm new to AngularJs and i'm trying to make web with angular.js and PHP.I'm having some trouble on displaying data from a Json . My controller

 $scope.careprovider = function() {
           $http.post('php/homefunctions.php', {
                'act': 'careprovider'
            }).success(function(data, status, headers, config) {
                 if (data.sessionError == 1) {

                     $location.path("/Login");


                }else {
                    alert(data.careproviders);
                      $scope.careprovider = data.careproviders;
                       $scope.specializations = data.specializations;
                }
            }).error(function(data, status) { 
                $scope.errors.push(status);
            });
        }

I have JSON Array object as shown below

 {"careproviders":
    {"Anaesthesiologists":
    [{"id":"37","addedBy":"5463e2dc0f","doctorName":"test","email":"sukalavan@consult-ic.com","hasUpdation":"NO"},
    {"id":"38","addedBy":"62f5d33584","doctorName":"test1","email":"sukalavan@consult-ic.com","hasUpdation":"NO"}],
    "Cardiologist":
    {"id":"38","addedBy":"62f5d33584","doctorName":"test2","email":"sukalavan@consult-ic.com","hasUpdation":"NO"}]}

I want to get the keys and values separately using ng-repeat in angular.js.Here is my html

<div ng-repeat="f in careprovider">
      <div class="cus-row-head">want show here the key</div>
        <div class="row cus_row clearfix cus-sep-row posrel">
               <div class="col-xs-12 col-md-12">
                     <div class="col-xs-6 col-lg-8 cus-col-mob-4">
                        <span class="cus-md-font">want to show here the doctor name</span>
                           <span class="cus-sm-font cus-inline">
                              <span class="glyphicon glyphicon-envelope"></span> email </span>

                       </div>
                      </div>
                   <a class="icons_sm icons-sm-edit"></a> 

              </div>
         </div>

Answer 1

try this

{{f.doctorName}} 

instead of "doctorName"

Check my plunker

Answer 2

Check out this jsfiddle I put together which has the type of structure you want.

If you want to loop through the keys of an object, your ng-repat should look like this:

<div ng-repeat="key in keys(object)"></div>

Where keys is defined in your controller as:

$scope.keys = function(obj){return obj? Object.keys(obj) : [];}

(BTW, your json has a missing '[' character in it.)

Answer 3

Try doing this:

ng-repeat="(key, value) in data"

Then you can access {{key}} and {{value}}

The method is mentioned here: https://docs.angularjs.org/api/ng/directive/ngRepeat