How to use Asset Selector in dialog | AEM 6.4?

As describe on Adobe's page at Here AEM provides an OOTB asset selector which includes image previews which is not present in  standard pathbrowser.

In the page above it also says that you can use the picker from a granite dialog:

http://localhost:4502/aem/assetpicker.html?dialog=true — Use these parameters to open the asset selector as Granite Dialog. This option is only applicable when you launch the asset selector through Granite Path Field, and configure it as pickerSrc URL.

I tried the following code in the dialog XML:

<pathfield
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
   name="./fileReference"
   pickerSrc="/aem/assetpicker.html?dialog=true"
   rootPath="/content/dam/"/>

The pathfield above does not seem to use the alternative picker specified with pickerSrcand not working at all.

Also tried adding the extra URL parameters as specified in the PathfieldDoc .

<pathfield
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
   name="./fileReference"
   pickerSrc="/mnt/overlay/granite/ui/content/coral/foundation/form/pathfield/picker.html?_charset_=utf-8&root=/content/dam"
   rootPath="/content/dam/"/>

But that made no change and work like normal (No image preview).

Any pointers as to what is wrong in the above dialogs definition?