Angularjs: view not updating when variable changes in success method of promise

I am calling a backend API using a factory method in angular. The factory method returns $http directly. In my controller, I am calling the factory method and fetching the data. The factory returned a promise, soon it attached. then and written a success method. Inside it I have $ctrl.currentImageDesc = data.description. I am getting the data.URL value correctly from API, it is getting updated to the currentImageDesc variable also but it's not reflecting in view. I am accessing it in view as {{$ctrl.currentImageDesc}}

Extra Info added on 17-05-2018: Actually there is child component 'antibodyGalleryTabs' inside the main component 'imageGallery'. What is found today is, when this child component is not accessed in the HTML, then the main component data is properly reflecting view. When I add the tag in html, the child component is working fine but the main component data is not reflected in view.

I have updated the code to show the details about child component.

Factory Service

angular.module('sharedModule').factory('GalleryDataService', galleryFactory)
galleryFactory.inject = ['$http', '$q']
function galleryFactory($http, $q) {
    var serviceUrl = $m.basepath + 'antibody-figures?assayId=';
       console.log('urllll',serviceUrl);
        return {
            fetchData : function(productid) {
                return $http({
                    method: 'GET',
                    url: serviceUrl + productid
                })
            }
        };
}

Component Code

angular.module('sharedModule').component('antibodyGalleryTabs', {
    template: 'TTTTTT<div class="tabs-container"><div class="nav-wrapper"><ul class="nav nav-pills"><li class="tab" ng-repeat="application in $ctrl.navPillsData" ng-class="{ \'tab--active\' : $ctrl.selectednav == application.abbreviation }"><a>{{ application.abbreviation }}</a></li></ul></div></div>',
    bindings:{
        navPillsData:'<',
        selectedNav:'@'
    },
    controller:antibodyGalleryTabsController
});
function antibodyGalleryTabsController(){
    $ctrl = this;
}

angular.module('sharedModule').component('imageGallery', {
    templateUrl: 'assets/shared-module/app/components/image-gallery/image-gallery.template.html',
    controller: imageGalleryController,
    bindings: {
    }
});

Component controller code

imageGalleryController.$inject = ['$q','$scope', '$attrs', '$element','GalleryDataService'];

function imageGalleryController($q,$scope, $attrs, $element, GalleryDataService) {
    $ctrl = this;
    $ctrl.selectednav = 'nav2';
    $ctrl.totalImages = 7; //this is getting updated and aslo reflected in view

    $q.when(GalleryDataService.fetchData('A11126'))
    .then(function (data){  
        $ctrl.navPillsData = [{abbreviation:'nav1'},{abbreviation:'nav2'}];//this array is generated from the 'data'. This is reflected in view correctly   
        var img = data.data[0].links[5];
        img.index = 5;
        $ctrl.totalImages = 27;
        updateCurrentImageDetails(img);
    });

    function updateCurrentImageDetails(currentImage){
    //these variables are getting updated but not reflected in view
        $ctrl.currentImageNum = currentImage.index;
        $ctrl.currentImageUrl = currentImage.url.src;
        $ctrl.currentImageTitle = currentImage.title;
        $ctrl.currentImageDesc = currentImage.description;
    }
}

HTML template

<div class="adv-cert-gallery drawer-gallery">

    <antibody-gallery-tabs navPillsData='$ctrl.navPillsData' selectedNav='$ctrl.selectednav'></antibody-gallery-tabs>

    <img src="{{$ctrl.currentImageUrl}}">

</div>

Accessing the component

<image-gallery></image-gallery>