<div id="wrapper" ng-app>
  <div ng-controller="DataCtrl">
    <pre ng-model="data">
     {{data}}
    </pre>
    
    <input ng-model='name' />
    {{name}}
    
    <input ng-model='salutation' />
    {{salutation}}
    
    <input ng-model='greeting' />
    {{greeting}}
  </div>
</div>  
#wrapper {
  width: 720px;
  margin: 0 auto;
}
angular.module('', []);

function DataCtrl($scope, $http) {
  
  $http.jsonp("https://angularjs.org/greet.php?callback=JSON_CALLBACK&name=Super%20Hero").
  success(function(data) {
    $scope.data = data;
    $scope.name = data.name;
    $scope.salutation = data.salutation;
    $scope.greeting = data.greeting;
    
    $("[ng-model='nameNew']").val(data.name);
    $("[ng-model='salutation']").val(data.salutation);
    $("[ng-model='greeting']").val(data.greeting);
  }).
  error(function (data) {
    $scope.data = "Request failed";
  });
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js