Controller values not available to template after $.ajax success in Ember

After much frustration with ember data, I'm trying a simpler approach to fetching & displaying data in Ember. I use $.ajax() to load data in a controller and update the controller's title property. This works. However, the template never updates. It displays 'Old Value'.

What needs to be done to make the template see the new value?

I'm working with Ember 3.1

    // controllers/index.js
    import Controller from '@ember/controller';

    export default Controller.extend({

        title:'Old Value',

        getData: $.ajax(
            {
            type: "GET",
            url:"https://jsonplaceholder.typicode.com/posts/1",
            success: function(data) {
                console.log("success", data);
                this.title = data.title;
                console.log("title: ", this.title); // logs new value: 'sunt aut fac..'
            }
        }
    )
});

template

 // templates/index.hbs
<h1>this is the index route</h1>
<h3>Title is: </h3>