How to using Sling Models in Component Java Class

Hi,

I want to use Sling Models to configure the component as I saw in the "Sling Models Vs WCMUsePojo'' posting.

through the tutorial and configured a custom component using Sling Models,

but Annotation fails when trying to place Java Class File in jcr_root / apps path.

Search for Use Case confirmed that WCMUsePojo is available.

How can i use Sling Models to local java-class in Component Folder?

( * pom.xml file went the same way as the tutorial setup. :  5 - Custom Component )

* Component Structure

└─apps

    └─wcde

        └─components

            └─content

                └─test

                    └─mid_hero

                        │  .content.xml

                        │  Controller.java

                        │  mid-hero.html

                        │  _cq_editConfig.xml

                        │

                        └─_cq_dialog

                                .content.xml

* Local Java Class File (Controller.java)

package apps.wcde.components.content.test.mid_hero;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;
import org.apache.sling.models.annotations.Model;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import javax.inject.Inject;
@Model(
        adaptables = { Resource.class },
        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL
        )
public class Controller implements apps.wcde.components.content.test.mid_hero.Controller {
    private static final Logger logger = LoggerFactory.getLogger(Controller.class);
    @Inject
    protected String title;
    public String getTitle() {
        return title;
    }
}

* htl (mid-hero.html)

<sly data-sly-use.data="apps.wcde.components.content.test.mid_hero.Controller"/>
<div style="font-size: 40px;"> TEST COMPONENT </div>
<div style="font-size: 20px;"> ${data.title} </div>