On mouseover event remove class from list-item'child
<pre><code>&lt;md-list layout-padding&gt;
     &lt;md-list-item class="md-3-line" ng-repeat="obj in value" ng-mouseover="ctrl.toggleTextTruncateClass(this)"&gt;
           &lt;div class="md-list-item-text"&gt;
                &lt;h3 class="text_truncate"&gt;{{obj.goalName}}&lt;/h3&gt;
                &lt;h4&gt;{{obj.goalDescription}}&lt;/h4&gt;
                &lt;h4&gt;{{obj.goalAchievementCount}} Achievement(s)&lt;/h4&gt;
            &lt;/div&gt;

            &lt;md-divider&gt;&lt;/md-divider&gt;
    &lt;/md-list-item&gt;
&lt;/md-list&gt;
</code></pre>

<p>I want when hover of md-list-item I want to remove class text_truncate from h3 inside list item text</p>

<p>I tried with </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>self.toggleTextTruncateClass = function (element) {
               angular.element(document.querySelector('.md-3-line')).find('h3').toggleClass('text_truncate')
            }</code></pre>
</div>
</div>
</p>