How to display my request response.value in HTML with angularJS

Don’t be rude i’m new with angularJS

I write a get function who request an API that give me some Chuck Norris Fact .

My question is simple : How to display the response in my HTML when i click on my button .

Actually when i click on my button i get my chuckNorrisFact sentence in my console .

Thanks a lot

here is my html

<!DOCTYPE html>
<html lang="FR">

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Random Chuck Norris jokes</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">

<body ng-app="mainApp">

    <div ng-controller="mainCtrl">
        <button ng-click="generateRandomJoke()"> have fun</button>


<script src=""></script>
<script src="controllers/controllers.js"></script>


And here is my controllers.js :

var app = angular.module('mainApp', []);

app.controller('mainCtrl', function ($scope, $http) {
    function getJoke() {
        $scope.generateRandomJoke = function () {
                method: "GET",
                url: "",
                .then(function mySuccess(response) {
                    $scope =;
                }, function myError(response) {
                    console.log("erreur : ",;

71 thoughts on “How to display my request response.value in HTML with angularJS”

Leave a Comment